我有一个选择框:
<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?
谢谢!
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");
# Set element by text
$("#select").val("option Text").attr("selected", "selected");
当你想用顶部方式选择集合选择时,你可以使用
$(" #选择选项”).removeAttr(“选择”);用于删除先前的选择。
# Set element by value
$("#select").val("2");
# Get selected text
$("#select").children("option:selected").text(); # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes
# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();
# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));
# Select First Option
$("#select option:first");
# Select Last Item
$("#select option:last").remove();
# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");
# Remove an item
$("#select option:eq(0)").remove();
为了澄清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;
复选框也是如此。
您可以动态设置选择变量值以及选项将被选中。您可以尝试下面的代码
代码:
<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>