Jquery设置optgroup选择的值

Question

我不确定如何设置optgroup选择值,确保选中的选项具有正确的标签.我遇到的问题是我有两个标签,但每个标签的选项可以相同.

标签1 =本田标签2 =丰田

两者的选项:

选项1 ="红色"选项2 ="蓝色"......

我想在document.ready()上的Honda标签下将所选选项设置为Blue.目前,当我尝试将选项设置为选中时,使用"蓝色"的最后一项是在这种情况下选择的在丰田标签下为蓝色的项目.

我试过了:

var color ="Blue";
var make ="Honda";
var test = $('#car_selector optgroup[label='+make+'] option[value="'+color+'"]')
test.prop('selected', true);

<select>
 <optgroup label="Honda">
   <option value="blue">Blue</option>
   <option value="red">Red</option>
 </optgroup>
 <optgroup label="Toyota">
   <option value="blue">Blue</option>
   <option value="red">Red</option>
 </optgroup>
</select>

Answer 1

假设你有类似这样的标记:

<select>
  <optgroup label="Honda">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </optgroup>
</select>

这个JS会起作用:

var make = 'Honda';
var color = 'red';

var optgroup = $('select optgroup[label="'+make+'"]')
var option = optgroup.find('option[value="'+color+'"]')

option.attr('selected', true)

JSBin在这里

编辑正如我在评论中提到的那样,将make变量正确引用到选择器中只是一个错误.