我有一个选择框:
<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?
谢谢!
当前回答
我需要一个解决方案，没有硬编码值在js文件;使用selectedIndex。大多数给出的解决方案在一个浏览器上失败。这似乎在FF10和IE8中工作(其他人能在其他版本中测试吗)
$("#selectBox").get(0).selectedIndex = 1;
其他回答
:不久
$ (" # selectBox”)。attr(“selectedIndex index)
其中index是所选的整数索引。
试试这个吧:
$("#selectBox").val(3);
注意:答案依赖于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"))
重要的是，理解一个select元素的val()返回所选选项的值，而不是像javascript中的selectedIndex那样返回元素的数量。
要选择值为"7"的选项，你可以简单地使用:
$('#selectBox').val(7); //this will select the option with value 7.
要取消选择该选项，请使用空数组:
$('#selectBox').val([]); //this is the best way to deselect the options
当然，您可以选择多个选项*:
$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7
*但是要选择多个选项，<select>元素必须有multiple属性，否则它将不起作用。
您可以动态设置选择变量值以及选项将被选中。您可以尝试下面的代码
代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
$(function(){
$('#allcheck').click(function(){
// $('#select_option').val([1,2,5]);also can use multi selectbox
// $('#select_option').val(1);
var selectoption=3;
$("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
});
});
HTML代码:
<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> <br>
<strong>Select <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>
