另一个非常重要的一点：

Question

我有一个选择框：

<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基于它的索引设置选项？

谢谢！

Answer 1

注意：answer取决于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")）

Answer 2

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

如果您想根据商品的价值而不是该商品的索引选择价值，那么您可以执行以下操作：

您的选择列表：

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

Answer 3

请改为尝试：

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

另外，看看这是否对您有所帮助：

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

Answer 4

更简单：

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

Answer 5

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

Answer 6

重要的是要理解，val()元素的select会返回所选选项的值，但不会返回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属性，否则无效。

Answer 7

我总是遇到道具问题（＆＃39;选择＆＃39;），以下一直对我有用：

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

Answer 8

试试这个：

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

最终，触发.change事件：

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

Answer 9

希望这可以帮助太多

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

Answer 10

在1.4.4中你会收到一个错误： $（“＃selectBox option”）[3] .attr不是函数

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

其中#name是选择ID，idx是您要选择的选项值。

Answer 11

为了澄清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])效率更高（请参阅test case）。

但实际上并不需要jQuery对象。这样就可以了：

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

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

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

另一个非常重要的一点：

属性“selected”不是指定所选单选按钮的方式（至少在Firefox和Chrome中）。使用“已检查”属性：

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

复选框也是如此。

Answer 12

选择第3个选项

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

Example on jsfiddle

Answer 13

注意：

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

是不正确的，数组deference会获取dom对象，而不是jquery对象，因此它会因TypeError而失败，例如在FF中：“$（'＃selectBox option'）[3] .attr（）不是功能。“

Answer 14

纯javascript selectedIndex属性是正确的方法，因为它是纯粹的javascript并且可以跨浏览器工作：

$('#selectBox')[0].selectedIndex=4;

Here is a jsfiddle demo有两个下拉列表，使用一个来设置另一个：

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

如果你想要的是选项标签（here is the fiddle）上的“selected”属性，你也可以在更改selectedIndex之前调用它：

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

Answer 15

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

Answer 16

我经常使用触发器（“更改”）使其工作

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

Answer 17

根据选择列表中的值选择项目（特别是如果选项值中有空格或奇怪的字符），只需执行以下操作：

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

此外，如果您有一个下拉菜单（而不是多选），您可能需要执行break;，这样就不会让第一个值被覆盖。

Answer 18

如果您的选择框是倍数，您也可以初始化多个值：

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

Answer 19

我遇到了同样的问题。首先，您需要完成事件（即首先发生的事件）。

例如：

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

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

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

要实现这一目标需要两个函数，可以说 generateSelectbox（）（用于生成选择框）和 selectDefaultOption（）

您需要确保只有在执行 generateSelectbox（）

后才能调用 selectDefaultOption（）

Answer 20

我需要一个在js文件中没有硬编码值的解决方案;使用selectedIndex。大多数给定的解决方案都失败了。这似乎适用于FF10和IE8（可以在其他版本中测试其他人）

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

Answer 21

如果您只想根据项目的特定属性选择项目，则[prop = val]类型的jQuery选项将获得该项目。现在我不关心索引我只是想要项目的值。

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

Answer 22

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

使用上述内容时，我不断收到webkit（Chrome）中的错误说：

“未捕获的TypeError：对象＃没有方法'attr'”

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

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

Answer 23

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

代码：

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

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

Answer 24

花了太多时间后，这个对我有用。

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

Answer 25

不久：

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

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

jQuery Set选择索引

25 个答案:

另一个非常重要的一点：