使用jQuery在选择列表上设置所选属性

Question

我有以下HTML:

<select id="dropdown">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

我有字符串"B"所以我想selected在它上面设置属性,所以它将是:

<select id="dropdown">
    <option>A</option>
    <option selected="selected">B</option>
    <option>C</option>
</select>

我将如何在jQuery中执行此操作？

Answer 1

如果您不介意稍微修改HTML以包含value选项的属性,则可以显着减少执行此操作所需的代码:

<option>B</option>

至

<option value="B">B</option>

当您想要执行以下操作时,这将非常有用:

<option value="IL">Illinois</option>

有了这个,后面的jQuery将进行更改:

$("select option[value='B']").attr("selected","selected");

如果您决定不使用该value属性,则需要循环浏览每个选项,并手动检查其值:

$("select option").each(function(){
  if ($(this).text() == "B")
    $(this).attr("selected","selected");
});

Answer 2

<select id="cars">
<option value='volvo'>volvo</option>
<option value='bmw'>bmw</option>
<option value='fiat'>fiat</option>
</select>

var make = "fiat";

$("#cars option[value='" + make + "']").attr("selected","selected");

Answer 3

如果您使用的是JQuery,那么从1.6开始就必须使用.prop()方法:

$('select option:nth(1)').prop("selected","selected");