jQuery设置选择索引


259

我有一个选择框:

<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根据选项的索引将其设置为选中状态?

谢谢!


2
这几乎与您先前的问题完全相同:stackoverflow.com/questions/1280369/…–
Kobi,

Answers:


451

注意:答案取决于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")


7
+1-第二个选项对我有用。John Kugelman选择的答案在IE7中对我不起作用。
P.Brian.Mackey

2
可悲的是,这些方式都无法为我触发change()事件。我有$('#selectBox')。change(function(){alert('changed')});
迈克·琼斯,

28
@mikejones-这是设计使然。以编程方式设置选定的选项时,您可能并不总是希望触发绑定更改事件(例如在页面加载事件上。)要解决该问题,jQuery由开发人员来决定。在您的情况下,您可以简单地调用$('#selectBox')。change();。在调用$('#selectBox')。val(“ 3”);之后;
Marcus Pope

2
第一个选项是0还是1?
Lee Meador

3
我认为值得一提的是,在jQuery 1.6.1之后,建议使用.prop()而不是修改元素的布尔属性的方法.attr()
DevlshOne 2013年

113

这也可能有用,所以我想在这里添加它。

如果要基于项目的值而不是该项目的索引选择一个值,则可以执行以下操作:

您的选择列表:

<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号”。


注意:$()之后要有一个额外的下划线...否则,这将非常有效
Dusty J 2010年

1
+1我无法使它完全正常工作,但是从中我终于使它可以使用以下语法:$(“#selectBox option [value ='C']”)[0] .selected = true;
Wes Grant

5
请注意,.attr('selected', 'selected')不应在同一选择上多次使用,因为某些浏览器可能会感到困惑(在某些情况下,它们开始将dom中的多个项目标记为selected=selected"。如果您需要更频繁地更改所选值(例如,在按钮上)点击).prop('selected', true),按Marc的建议使用-感到非常痛苦-浪费了时间-因为这个问题!
Tom Fink

66

尝试以下方法:

$("#selectBox").val(3);

2
这也使得从一个元素复制到另一个死亡变得简单!
桑尼2010年

错字:在“ selectBox”之后,您缺少引号
Niels Bom 2010年

1
这很简单明了。我非常喜欢这种解决方案。
Dan Bailiff,

这在Chrome中有效,但不适用于IE9。我使用:$('#selectBox option')[3] .selected = true; (听众回答)。
cederlof 2012年

FWIW,这对我来说甚至在Chrome中都不起作用。使用“:nth-​​child”答案对我有用。
杰伊·泰勒

50

更简单:

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

1
这对我有用,我还需要按INDEX而不是VALUE进行选择。
艾伦(Alan)

1
这个答案给了我我所需要的。
Smith Smithy

16
# 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');删除先前的选择。

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

+1:$('#select option')。removeAttr('selected'); 最简单的选项,将“选定”项返回顶部,或者没有定义的选择。
Michael Trouw

11

需要理解的重要一点是,val()对于select元素,返回的是所选选项的值,但不返回元素的数量selectedIndex javascript中。

要选择该选项,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属性,否则它将不起作用。


11

我一直都遇到prop('selected')的问题,以下内容一直对我有用:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

8

试试这个:

$('select#mySelect').prop('selectedIndex', optionIndex);

最终,触发一个.change事件:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

6

希望这也能有所帮助

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


4

注意:

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

是不正确的,数组引用会为您提供dom对象,而不是jquery对象,因此它将因TypeError而失败,例如,在FF中使用:“ $('#selectBox option')[3] .attr()不是函数”。


4

为了阐明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 option')[3])效率更高(请参阅测试用例)。

您实际上并不需要jQuery对象。这将达到目的:

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

http://api.jquery.com/get/

http://api.jquery.com/eq/

另一个至关重要的一点:

属性“ selected”不是您指定选定单选按钮的方式(至少在Firefox和Chrome中)。使用“已检查”属性:

$('#selectBox option')[3].checked = true;

复选框也是如此。


4

在1.4.4中,会出现错误: $(“#selectBox option”)[3] .attr不是函数

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

#name选择ID idx是哪里,是要选择的选项值。


4

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

如果您想要的是选项标签上的“ selected”属性,也可以在更改selectedIndex之前调用此方法(这里是小提琴):

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

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

2

我经常使用触发器(“更改”)使其工作

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

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

使用以上方法时,我在webkit(Chrome)中不断收到错误消息:

“未捕获的TypeError:对象#没有方法'attr'”

此语法可停止这些错误。

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

1

只需执行以下操作,即可基于选择列表中的值(特别是如果选项值中包含空格或怪异字符)来选择项目:

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

另外,如果您有一个下拉菜单(而不是多选菜单),则可能需要执行一次操作break;,这样就不会使找到的第一个值被覆盖。


1

我需要一个在js文件中没有硬编码值的解决方案;使用selectedIndex。给定的大多数解决方案都无法通过一个浏览器。这似乎可以在FF10和IE8中使用(其他人可以在其他版本中进行测试)

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

1

如果您只是想根据某项的特定属性选择某项,则类型为[prop = val]的jQuery选项将获取该项。现在我不在乎索引,我只是想要按值显示项目。

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

1

我遇到了同样的问题。首先,您需要检查事件(即首先发生哪个事件)。

例如:

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

所述第二事件是选择使用任何功能,诸如Val()等默认选项

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

为了实现这一点,需要使用两个函数,例如generateSelectbox()(用于生成选择框)和selectDefaultOption()

您需要确保仅在执行generateSelectbox()之后才应调用selectDefaultOption ()。


1

如果您的选择框是多个,则还可以初始化多个值:

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

0

您可以动态设置selectoption变量的值,也可以选择option。您可以尝试以下代码

码:

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


-2

不久:

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

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


此代码有效$('#selectBox')。prop({selectedIndex:desiredIndex})
jurijcz
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.