jQuery设置select索引
我有一个select框：
<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> 我想根据select的索引将其中一个选项设置为“选中”。
例如，如果我正在设置“Number 3”，我试着这样做：
$('#selectBox')[3].attr('selected', 'selected');
但是这不起作用。 我如何设置一个选项基于它的索引使用jQueryselect？
谢谢！
注意 ：答案依赖于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函数也可以在select器之外使用，如果您愿意的话。
$('#selectBox option').eq(3).prop('selected', true);
如果你想使用这个值 ，你也可以更简洁/可读，而不是依靠select一个特定的索引 ：
$("#selectBox").val("3");
注意： .val(3)也适用于这个例子，但是非数字值必须是string，所以我select了一个string来保持一致性。
（例如<option value="hello">Number3</option>需要使用.val("hello") ）
这可能也是有用的，所以我想我会在这里添加它。
如果您想要根据项目的值而不是该项目的索引来select值，则可以执行以下操作：
您的select列表：
<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);
所选的项目现在是“Number 2”。
试试这个：
$("#selectBox").val(3);
另外，看看这是否有助于你：
http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/
更简单：
$('#selectBox option')[3].selected = true;
# Set element with index $("#select option:eq(2)").attr("selected", "selected"); # Set element by text $("#select").val("option Text").attr("selected", "selected");
当你想select最佳方式进行select时，可以使用
$('#select option').removeAttr('selected'); 删除以前的select。
# 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();
重要的是要明白，一个select元素的val()返回所选选项的值，而不是像javascript中的selectedIndex那样返回元素的数量。
要selectvalue="7"的选项，您可以简单地使用：
$('#selectBox').val(7); //this will select the option with value 7.
要取消select使用一个空数组：
$('#selectBox').val([]); //this is the best way to deselect the options
当然，您可以select多个选项*：
$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7
*但是，要select多个选项，您的<select>元素必须具有MULTIPLE属性，否则将无法工作。
尝试这个：
$('select#mySelect').prop('selectedIndex', optionIndex);
最终，触发一个.change事件：
$('select#mySelect').prop('selectedIndex', optionIndex).change();
我一直有道具（“选定”）的问题，下面一直为我工作：
//first remove the current value $("#selectBox").children().removeAttr("selected"); $("#selectBox").children().eq(index).attr('selected', 'selected');
希望这可以帮助太
$('#selectBox option[value="3"]').attr('selected', true);
为了澄清Marc和John Kugelman的答案，你可以使用：
$('#selectBox option').eq(3).attr('selected', 'selected')
如果以指定的方式使用get()将无法工作，因为它获取DOM对象，而不是jQuery对象，所以下面的解决scheme将不起作用：
$('#selectBox option').get(3).attr('selected', 'selected')
eq()获取filter设置为具有指定索引的元素的jQuery。 它比$($('#selectBox option').get(3))更清晰。 这并不是那么高效。 $($('#selectBox option')[3])更高效（见testing用例 ）。
你实际上不需要jQuery对象。 这将做的伎俩：
$('#selectBox option')[3].selected = true;
另一个非常重要的问题是：
“selected”属性不是指定一个选定的单选button的方式（至less在Firefox和Chrome中）。 使用“checked”属性：
$('#selectBox option')[3].checked = true;
checkbox也是一样的。
在1.4.4中，你会得到一个错误： $（“＃selectBox option”）[3] .attr不是一个函数
这个工程： $('#name option:eq(idx)').attr('selected', true);
其中#name是selectID，而idx是要select的选项值。
纯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之前调用它，如果你想要的是选项标签上的“selected”属性（ 这里是小提琴 ）：
$('#selectBox option').removeAttr('selected') .eq(this.selectedIndex).attr('selected','selected');
注意：
$('#selectBox option')[3].attr('selected', 'selected')
是不正确的，数组尊敬让你的dom对象，而不是一个jquery对象，所以它会失败，TypeError，例如在FF中：“$（'＃selectBox选项'）[3] .attr（）不是一个函数“。
select第三个选项
$('#selectBox').val($('#selectBox option').eq(2).val());
在jsfiddle的例子
$('#selectBox option').get(3).attr('selected', 'selected')
当使用上述我不断在webkit（铬）的错误说：
“Uncaught TypeError：Object＃has no method'attr'”
这个语法停止这些错误。
$($('#selectBox option').get(3)).attr('selected', 'selected');
//funcion para seleccionar por el text del select var text = ''; var canal = ($("#name_canal").val()).split(' '); $('#id_empresa option').each(function(i, option) { text = $('#id_empresa option:eq('+i+')').text(); if(text.toLowerCase() == canal[0].toLowerCase()){ $('#id_empresa option:eq('+i+')').attr('selected', true); } });
根据select列表中的值（特别是如果选项值中有空格或怪异字符）select项目，只需执行以下操作：
$("#SelectList option").each(function () { if ($(this).val() == "1:00 PM") $(this).attr('selected', 'selected'); });
另外，如果你有一个下拉菜单（而不是多选），你可能需要break; 所以你没有得到第一个被发现的值被覆盖。
我需要一个在js文件中没有硬编码值的解决scheme; 使用selectedIndex 。 大多数给定的解决scheme失败了一个浏览器 这似乎工作在FF10和IE8（可以别人在其他版本testing）
$("#selectBox").get(0).selectedIndex = 1;
如果你只是想select一个基于项目的特定属性的项目，那么types[prop = val]的jQuery选项将获得该项目。 现在我不关心索引，我只是想要项目的价值。
$('#mySelect options[value=3]).attr('selected', 'selected');
我面临同样的问题。 首先，您需要查看事件（即首先发生哪个事件）。
例如：
第一个事件是生成选项的select框。
第二个事件是使用任何函数（如val（）等）select默认选项
您应该确保在第一个事件之后发生第二个 事件 。
为了实现这个function，可以使用两个函数generateSelectbox（） （用于创buildselect框）和selectDefaultOption（）
您需要确保selectDefaultOption（）只有在执行generateSelectbox（）之后才会被调用
如果您的select框是多个，您也可以初始化多个值：
$('#selectBox').val(['A', 'B', 'C']);
您可以dynamic设置selectoptionvariables值以及选项将被选中。您可以尝试下面的代码
码：
<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>
不久：
$("#selectBox").attr("selectedIndex",index)
其中索引是所选索引的整数。
