title: Access values in select option tag with more than one value using javascript
body: <p>Here is my code.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showDiv(divID,val) {
          var text= val.value;
          alert(text);
      }
  &lt;/script&gt;
  
  Mouse:&lt;select onChange="showDiv('#mouse',this);"&gt;
      &lt;option value=""&gt;Select Mouse Type&lt;/option&gt;
      &lt;option value="{'text':'Normal','id':'normalMouse'}"&gt;Normal&lt;/option&gt;
      &lt;option value="{'text':'Gaming','id':'gamingMouse'}"&gt;Gaming&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The output is:</p>
  
  <blockquote>
    <p>{'text':'Normal','id':'normalMouse'}</p>
  </blockquote>
  
  <p>But The output should be 'normal' only. That means I want to access to those values separately.How to do that?</p>