title: Setting multiple values for option select and get them with jQuery
body: <p>I'm trying to assign two values to a select option and select one or the other depending on the result of a subsequent radio button.</p>
  
  <p>So for instance, in this example, I used 2 different shirts with two different prices depending on the size of the shirt you pick. <strong>I know this code doesn't work, probably because of the "value1" and "value2" but I am just putting it here to illustrate what I am trying to achieve.</strong></p>
  
  <p><a href="http://jsfiddle.net/Shibi/o2hftb6e/3/" rel="nofollow">http://jsfiddle.net/Shibi/o2hftb6e/3/</a></p>
  
  <p>Any help would be great. Thanks!</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;select id="shirts"&gt;
      &lt;option&gt;Choose shirt&lt;/option&gt;
      &lt;option value1="15" value1="20"&gt;Shirt 1&lt;/option&gt;
      &lt;option value1="20" value1="25"&gt;Shirt 2&lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;
      &lt;input type="radio" name="1" value="small" /&gt;Small
      &lt;input type="radio" name="1" value="medium" /&gt;Medium&lt;/div&gt;
  &lt;div id="priceSummary"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#shirts').on('change', function () {
  
      var selectedShirtText = $("#shirts :selected").text();
      var selectedShirtValue = $("#shirts :selected").val();
  
      $("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");
  
  });
  </code></pre>