我有一个选择框:

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

谢谢!


当前回答

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

如果你想根据项目的值而不是该项的索引来选择一个值,那么你可以执行以下操作:

您的选择列表:

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

其他回答

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

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

为了澄清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选项')[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;

复选框也是如此。

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

代码:

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

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

例如:

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

第二个事件是使用val()等函数选择默认选项。

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

为了实现这个目标,需要用到两个函数,比如generateSelectbox()(用于生成选择框)和selectDefaultOption()

您需要确保只有在generateSelectbox()执行之后才调用selectDefaultOption()

希望这也能有所帮助

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