title: Jquery set optgroup selected value
body: <p>I am not sure how to set the optgroup selected value, making sure the option selected has the correct label. The problem that i am having is that I have two labels but the options for each can be the same.</p>
  
  <p>Label 1 = Honda
  Label 2 = Toyota</p>
  
  <p>Options for both:</p>
  
  <p>option 1 = "Red"
  option 2 ="Blue" ...</p>
  
  <p>I want to set the selected option to Blue under the Honda label on document.ready().
  Currently when i try to set the option as selected the last item using "Blue" is the one that is selected in this case that is Blue under the Toyota label.</p>
  
  <p>I have tried:</p>
  
  <pre><code>var color ="Blue";
  var make ="Honda";
  var test = $('#car_selector optgroup[label='+make+'] option[value="'+color+'"]')
  test.prop('selected', true);
  
  &lt;select&gt;
   &lt;optgroup label="Honda"&gt;
     &lt;option value="blue"&gt;Blue&lt;/option&gt;
     &lt;option value="red"&gt;Red&lt;/option&gt;
   &lt;/optgroup&gt;
   &lt;optgroup label="Toyota"&gt;
     &lt;option value="blue"&gt;Blue&lt;/option&gt;
     &lt;option value="red"&gt;Red&lt;/option&gt;
   &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>