我有一个选择框:

<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?

谢谢!


当前回答

为了澄清Marc和John Kugelman的回答,你可以使用:

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

如果以指定的方式使用get()将无法工作,因为它获取的是DOM对象,而不是jQuery对象,因此下面的解决方案将无法工作:

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

eq()将jQuery集过滤为具有指定索引的元素的jQuery集。它比$($('#selectBox option').get(3))更清晰。它不是那么有效。$($('#selectBox选项')[3])更有效(参见测试用例)。

但实际上并不需要jQuery对象。这样就可以了:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

还有一点非常重要:

属性“selected”不是你指定选中单选按钮的方式(至少在Firefox和Chrome中是这样)。使用"checked"属性:

$('#selectBox option')[3].checked = true;

复选框也是如此。

其他回答

试试这个吧:

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

试试这个:

$('select#mySelect').prop('selectedIndex', optionIndex);

最后,触发一个.change事件:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

选择第三个选项

$('#selectBox').val($('#selectBox option').eq(2).val());

关于jsfiddle的示例

如果你只是想根据一个项目的特定属性选择一个项目,那么jQuery的[prop=val]类型选项将获得该项目。现在我不关心索引,我只需要元素的值。

$('#mySelect options[value=3]).attr('selected', 'selected');

根据选择列表中的值选择项目(特别是如果选项值中有空格或奇怪的字符),只需这样做:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

此外,如果你有一个下拉菜单(而不是多选菜单),你可能需要暂停;这样就不会覆盖第一个找到的值。