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

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

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

我希望用户点击一个链接，然后让 <select>框改变它的值，就好像用户通过点击 <option>选择了它一样。

431615 次浏览
小开
最佳答案

怎么样

$('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>

小开

解决办法:

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

如果你的期权有价值，你可以这样做:

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

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

小开

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

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

用 id 回答:

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

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;
小开 
 $('select>option:eq(3)').attr('selected', 'selected');

这里需要注意的一点是，如果您使用 javascript 监视 select/option 的更改事件，那么您需要添加 .trigger('change')，这样代码就会变成。

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

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

小开

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

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

为了得到选定的值，不要给出参数:

$('select').val();

此外，如果你有 <option value="valueToSelect">...</option>，你可以:

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

演示

小开

元素通常使用“ value”属性，这样可以更容易设置:

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

试试这个:

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

问候！

小开

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

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

我会这么做

 $("#idElement").val('optionValue').trigger('change');
小开 
 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);
小开

这对我有用:

$selectedindex=4

如果你想随机选择，你可以这样做:

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

虽然第2项不在你的问题范围之内，但它可以说明第1项如何应用/修订为要求。


提交答案