我有一个选择框:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

我想将其中一个选项设置为“选定”基于它的选定索引。

例如,如果我试图设置“数字3”,我尝试这样做:

$('#selectBox')[3].attr('selected', 'selected');

但这行不通。我如何设置一个选项,因为选择基于它的索引使用jQuery?

谢谢!


当前回答

这可能也很有用,所以我想在这里添加它。

如果你想根据项目的值而不是该项的索引来选择一个值,那么你可以执行以下操作:

您的选择列表:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

现在选中的项目是“2号”。

其他回答

这可能也很有用,所以我想在这里添加它。

如果你想根据项目的值而不是该项的索引来选择一个值,那么你可以执行以下操作:

您的选择列表:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

现在选中的项目是“2号”。

注意:答案依赖于jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

感谢您的评论,.get将无法工作,因为它返回一个DOM元素,而不是jQuery元素。请记住,如果您愿意,.eq函数也可以在选择器之外使用。

$('#selectBox option').eq(3).prop('selected', true);

如果你想使用值,而不是依赖于选择特定的索引,你也可以更简洁/可读:

$("#selectBox").val("3");

注意:.val(3)对于这个例子也很有效,但是非数字值必须是字符串,所以为了保持一致性,我选择了字符串。 (例如:<option value="hello">Number3</option>要求你使用.val("hello"))

如果你的选择框是一个multipl,你也可以初始化多个值:

$('#selectBox').val(['A', 'B', 'C']);
$('#selectBox option').get(3).attr('selected', 'selected')

当使用上面的我一直在webkit (Chrome)的错误说:

“未捕获的类型错误:对象#没有方法'attr'”

此语法可以阻止这些错误。

$($('#selectBox  option').get(3)).attr('selected', 'selected');

希望这也能有所帮助

$('#selectBox option[value="3"]').attr('selected', true);