如何使用jQuery选择下拉菜单选项？

157

我想知道是否有可能让jQuery <option>在下拉框中选择，例如第4个项目？

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

我希望用户单击一个链接，然后让该<select>框更改其值，就像用户通过单击来选择它一样<option>。

— 点点
source

4

您的选择是否有价值？

— 维克多

184

怎么样

$('select>option:eq(3)').attr('selected', true);

http://www.jsfiddle.net/gaby/CWvwn/中的示例

对于现代版本的jquery，应使用.prop()代替.attr()

$('select>option:eq(3)').prop('selected', true);

http://jsfiddle.net/gaby/CWvwn/1763/上的示例

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

3

imo这甚至不起作用；选项的选中状态应该改变的状态触发选择本身，而不是:)

— 杰克

1

selectElement.selectedIndex = index;是杰克的意思。

— rlemon

我知道@rlemon，但selectedIndex使用multiple属性时不能用于多重选择。设置所选元素的常规（html）方法是元素的selected属性option。

— 加布里埃莱

@ GabyakaG.Petrioli正常的方法实际上是将selected每个相应options元素的属性设置为true（并且可选地将其余元素的属性false显式设置）。多重选择是非常讨厌的实际:)

— 杰克

6

@sunnyiitkgp以onchange编程方式更改值时，永远不会触发事件。您可以.trigger('change')在末尾添加a 来触发事件（尽管无论实际值是否更改都将触发）

— Gabriele Petrioli 2016年

149

解决方案：

$("#element-id").val('the value of the option');

— 哈罗德·索塔
source

2

它不会selected在HTML中设置该选项。

— Ahmad hamza

54

HTML select元素具有selectedIndex可以写入的属性，以选择特定的选项：

$('select').prop('selectedIndex', 3); // select 4th option

使用纯JavaScript可以通过以下方法实现：

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

— 插口
source

7

这应该是公认的答案...看起来像是最清洁最干净的解决方案...

— DenysSéguret2013年

1

问题在于它不会触发“ onchange”事件。

— Guy Korland

2

@GuyKorland这没有其他答案，在这里展示；如果您要触发事件，则必须手动执行。

— 杰克

1

@Jack有很短的路吗？我发现的唯一方法是：var fireEvent = function（selectElement）{if（selectElement）{if（selectElement中的“ fireEvent”）{selectElement.fireEvent（“ onchange”）; } else {var evt = document.createEvent（“ HTMLEvents”）; evt.initEvent（“ change”，false，true）; selectElement.dispatchEvent（evt）; }

— 盖·科兰

4

@GuyKorland jQuery公开.trigger()了这一点，但是由于您已经使用代码进行了此操作，因此也可以很容易地自己调用更改处理程序。

— 2013年

30

我会这样

 $("#idElement").val('optionValue').trigger('change');

— 怪兽
source

3

这应该是选定的答案

— Uzumaki Naruto

2

$（“＃idElement”）。val（'optionValue'）。change（）也可以正常工作

— -Ullullu

24

如果您的选择具有价值，则可以执行以下操作：

$('select').val("the-value-of-the-option-you-want-to-select");

“选择”将是您选择的ID或类选择器。或者，如果只有一个选择，则可以使用示例中的标记。

— 胜利者
source

2

那正是我所需要的。谢谢。

— chapman84 '04

23

最简单的方法是val(value)功能：

$('select').val(2);

为了获得选定的值，您不提供任何参数：

$('select').val();

另外，如果您有<option value="valueToSelect">...</option>，可以执行以下操作：

$('select').val("valueToSelect");

演示

— 爱奥尼亚比乌
source

还可以使用$（'＃SelectCtrlId'）。val（'ValueToSelect'）;

— 西

9

如果要选择具有特定值的选项，请使用以下代码：

$('select>option[value="' + value + '"]').prop('selected', true);

— Nlareu
source

$（'select'）。val（value）; 为什么那么认真？;）

— Zeeshan 2015年

1

@Zee回答的代码也允许多个选择。

— Azghanvi '17

5

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

— 马蒙·拉西德（Mamun Rasid）
source

3

我更喜欢nth-child（）而不是eq（），因为它使用基于1的索引而不是基于0的索引，这在我的大脑上稍微容易一些。

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

— 李东
source

当处理带有日期的内容时，“基于1的索引”更好。使我免于很多麻烦。谢谢。

— TCB13'2

3

通常使用'元素，我们使用'value'属性。这样可以更轻松地进行设置：

$('select').val('option-value');

— 萨瓦拉特卡
source

3

试试这个：

$('#mySelectElement option')[0].selected = true;

问候！

— 尼古拉斯·菲涅利（Nicolas Finelli）
source

2

用ID回答：

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

— 爪哇·马苏米
source

1

 $('select>option:eq(3)').attr('selected', 'selected');

需要注意的是，如果您使用JavaScript监视选择/选项的更改事件，则需要添加.trigger('change')该代码，以使其成为代码。

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

因为仅调用.attr('selected', 'selected')不会触发事件

— 凯尼特
source