我有一个选择框:
<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?
谢谢!
注意:答案依赖于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"))
纯javascript selectedIndex属性是正确的方法,因为它是纯javascript,可以跨浏览器工作:
$('#selectBox')[0].selectedIndex=4;
这是一个jsfiddle演示,有两个下拉列表,使用一个来设置另一个:
<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select id="selectBox">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
</select>
你也可以在改变selectedIndex之前调用它,如果你想要的是option标签上的“selected”属性(这里是fiddle):
$('#selectBox option').removeAttr('selected')
.eq(this.selectedIndex).attr('selected','selected');
注意:答案依赖于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"))