jQuery Set选择索引

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

注意:答案取决于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元素,返回所选选项的值,而不是像selectedIndexjavascript中那样返回元素的数量.

要选择该选项,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

我一直有道具('选择')的问题,以下一直对我有用:

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

纯 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');

Answer 11

选择第三个选项

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

jsfiddle上的示例