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

Posted 2023-02-16

【中文标题】如何使用 jQuery 选择下拉选项？

【英文标题】：How to use jQuery to select a dropdown option?

【发布时间】：2011-06-19 08:59:30

【问题描述】：

我想知道是否可以让 jQuery 在下拉框中选择 <option>，比如第 4 项？

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

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

【问题讨论】：

你的选择有价值吗？

【参考方案1】：

怎么样

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

示例：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

---

对于现代版本的 jquery，您应该使用 .prop() 而不是 .attr()

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

示例：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

【讨论】：

imo 这甚至不应该工作；选项的选定状态应该通过更改选择本身的状态来触发:)

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

@rlemon，我明白了，但是当使用multiple 属性时，selectedIndex 不能用于多选。而设置选定元素的常规 (html) 方法是 option 元素的 selected 属性。

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

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

【参考方案2】：

解决办法：

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

【讨论】：

它没有在 HTML 中设置 selected 选项。

【参考方案3】：

HTML 选择元素有一个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;

【讨论】：

问题是它不会触发 'onchange' 事件。

@GuyKorland 这发生在没有其他答案的情况下，证明here;如果你想触发一个事件，你必须手动完成。

@Jack 有捷径吗？我发现的唯一方法： var fireEvent = function(selectElement) if(selectElement) if ("fireEvent" in selectElement) selectElement.fireEvent("onchange"); else var evt = document.createEvent("HTMLEvents"); evt.initEvent("改变", false, true); selectElement.dispatchEvent(evt);

@GuyKorland jQuery 为此公开了.trigger()，但由于您已经使用代码执行此操作，因此您自己也可以轻松调用更改处理程序。

【参考方案4】：

我会这样做

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

【讨论】：

$("#idElement").val('optionValue').change() 也可以工作

【参考方案5】：

最简单的方法是val(value)函数：

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

并且要获得所选值，您无需提供任何参数：

$('select').val();

另外，如果你有<option value="valueToSelect">...</option>，你可以这样做：

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

DEMO

【讨论】：

也有效 $('#SelectCtrlId').val('ValueToSelect');

【参考方案6】：

如果你的选项有值，你可以这样做：

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

'select' 将是您的选择或类选择器的 id。或者如果只有一个选择，您可以使用示例中的标记。

【参考方案7】：

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

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

【讨论】：

$('select').val(value);为什么如此严肃？ ;)

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

【参考方案8】：

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

【参考方案9】：

我更喜欢 nth-child() 而不是 eq()，因为它使用基于 1 的索引而不是基于 0 的索引，这对我的大脑来说稍微容易一些。

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

【讨论】：

在处理带有日期的事物时，“基于 1 的索引”会更好。使我免于许多麻烦。谢谢。

【参考方案10】：

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

这里需要注意的是，如果您有 javascript 监视选择/选项的更改事件，则需要添加 .trigger('change') 以便代码变为。

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

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

【参考方案11】：

对于 '' 元素，我们通常使用 'value' 属性。这样设置起来会更容易：

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

【参考方案12】：

试试这个：

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

问候！

【参考方案13】：

用 id 回答：

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

【参考方案14】：

这对我有用：

$selectedindex=4

如果你想随机化选项，你总是可以这样做：

$0selectedindex=Math.floor((Math.random()*($0.length-1)+1)

虽然第二个超出了您的问题范围，但它可以说明如何根据需要应用/修改第一个。

【讨论】：

（注意 - $0 用于表示 $，但我对 Python 比较陌生，所以仍然熟悉与其中一些语法相关的差异 - 但 selectedindex 仍然有效。在 jquery 世界中 - 希望这个有帮助。