jQuery设置选择索引

我有一个选择框:

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

谢谢!

596675 次浏览

试试这个吧:

$("#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 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);

现在选中的项目是“2号”。

注:

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

是不正确的,数组遵从得到你的dom对象,而不是一个jquery对象,所以它将失败的TypeError,例如在FF与:"$('#selectBox选项')[3].attr()不是一个函数。"

在1.4.4中,你会得到一个错误:$(" #选择框选择")[3]。Attr不是一个函数

$('#name option:eq(idx)').attr('selected', true);

其中#name是select id, idx是你想要选择的选项值。

更简单:

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

当使用上面的我一直在webkit (Chrome)的错误说:

“未捕获的类型错误:对象#没有方法'attr'”

此语法可以阻止这些错误。

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

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

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

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

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

eq()将jQuery集合过滤为具有指定索引的元素的集合。它比$($('#selectBox option').get(3))更清楚。它不是那么有效。$($('#selectBox option')[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;

复选框也是如此。

//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);
}
});

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

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

:不久

$("#selectBox").attr("selectedIndex",index)

其中index是所选的整数索引。

我需要一个解决方案,没有硬编码值在js文件;使用selectedIndex。大多数给出的解决方案在一个浏览器上失败。这似乎在FF10和IE8中工作(其他人能在其他版本中测试吗)

$("#selectBox").get(0).selectedIndex = 1;

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

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

此外,如果你有一个下拉菜单(而不是多重选择),你可能想要做break;,这样你就不会让第一个值被覆盖。

重要的是要理解select元素的val()返回所选选项的值,而不是像javascript中的selectedIndex那样返回元素的数量。

要选择带有value="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属性,否则它将不起作用。

我也面临同样的问题。 首先你需要遍历事件(即哪个事件先发生)

例如:

第一个事件正在生成带有选项的选择框。

第二个事件正在使用val()等任何函数选择默认选项。

你应该确保第二个事件应该发生在第一个事件之后。

为了实现这一点,我们取两个函数generateSelectbox ()(用于生成选择框)和selectDefaultOption ()

你需要确保selectDefaultOption ()只应该在执行generateSelectbox ()之后被调用

如果你的选择框是一个multipl,你也可以初始化多个值:

$('#selectBox').val(['A', 'B', 'C']);

您可以动态设置选择变量值以及选项将被选中。您可以尝试下面的代码

代码:

 <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&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");


# Set element by text
$("#select").val("option Text").attr("selected", "selected");

当你想用顶部方式选择集合选择时,你可以使用
$('#select option').removeAttr('selected');用于删除先前的选择。< / p >

# 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();

希望这也能有所帮助

$('#selectBox option[value="3"]').attr('selected', true);

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

如果你想要的是option标签(这是小提琴)上的"selected"属性,你也可以在更改selectedIndex之前调用它:

$('#selectBox option').removeAttr('selected')
.eq(this.selectedIndex).attr('selected','selected');

选择第三个选项

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

jsfiddle上的示例

试试这个:

$('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:eq(position_index)').prop('selected', true).trigger('change');

示例:id select = selectA1, position_index = 0 (select中的第一个选项):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

在花了太多时间之后,这个方法对我很有效。

$("#selectbox")[0].selectedIndex = 1;