如何在jQuery中的SELECT元素中选择特定选项？

如果您知道索引、值或文本。如果您没有直接引用的ID。

这个49820">这个、这个和这个都是有用的答案。

示例标记

<div class="selDiv"><select class="opts"><option selected value="DEFAULT">Default</option><option value="SEL1">Selection 1</option><option value="SEL2">Selection 2</option></select></div>
1247618 次浏览
小开

回答我自己留档的问题。我确信还有其他方法可以做到这一点，但这是有效的，并且此代码经过测试。

<html><head><script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script><script type="text/JavaScript">
$(function() {$(".update").bind("click",      // bind the click event to a divfunction() {var selectOption = $('.selDiv').children('.opts') ;var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index='0']").attr("selected","selected");//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");//          $(selectOption).find("option[text='Default']").attr("selected","selected");

//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");//          $(_this).find("option[text='Default']").attr("selected","selected");//          $(_this).find("option[index='0']").attr("selected","selected");
}); // END Bind}); // End eventlistener
</script></head><body><div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div><div class="selDiv"><select class="opts"><option selected value="DEFAULT">Default</option><option value="SEL1">Selection 1</option><option value="SEL2">Selection 2</option></select></div></body></html>
小开

您可以使用val()方法：

$('select').val('the_value');
小开
最佳答案

按值获取中间选项元素的选择器是

$('.selDiv option[value="SEL1"]')

对于索引：

$('.selDiv option:eq(1)')

对于已知文本：

$('.selDiv option:contains("Selection 1")')

编辑：如上所述，OP可能是在更改下拉列表的选定项目之后。在1.6版及更高版本中，建议使用prop（）方法：

$('.selDiv option:eq(1)').prop('selected', true)

在旧版本中：

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2：在Ryan的评论之后。在“选择10”上匹配可能不需要。我发现没有选择器与全文匹配，但是过滤器有效：

 $('.selDiv option').filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3：使用$(e).text()时要小心，因为它可能包含一个换行符，导致比较失败。当选项隐式关闭（没有</option>标签）时会发生这种情况：

<select ...><option value="1">Selection 1<option value="2">Selection 2:</select>

如果您只是使用e.text，任何额外的空格（如尾随换行符）都将被删除，从而使比较更加健壮。

小开

上面的方法都没有提供我需要的解决方案，所以我想我会提供适合我的方法。

$('#element option[value="no"]').attr("selected", "selected");
小开

您可以命名选择并使用它：

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

它应该选择您想要的选项。

小开

如果您将属性发送到函数并需要更新选择选项，则选择JQuery

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');$('#editLocationCity').chosen().change();$('#editLocationCity').trigger('liszt:updated');
小开

按价值计算，我使用jQuery 1.7的方法是下面的代码，试试这个：

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
小开

我将与：-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
小开

当我知道列表的索引时，我使用这个。

$("#yourlist :nth(1)").prop("selected","selected").change();

这允许列表更改，并触发更改事件。“： nth（n）”从索引0开始计数

小开 
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");
小开

$('select').val('the_value');看起来是正确的解决方案，如果你有数据表行，那么：

$row.find('#component').val('All');
小开

使用jquery-2.1.4，我发现以下答案对我有用：

$('#MySelectionBox').val(123).change();

如果您有字符串值，请尝试以下操作：

$('#MySelectionBox').val("extra thing").change();

其他例子对我不起作用，所以这就是我添加这个答案的原因。

我找到了原来的答案：https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

小开

如果你不想使用jQuery，你可以使用下面的代码：

document.getElementById("mySelect").selectedIndex = "2";
小开 
/* This will reset your select box with "-- Please Select --"   */<script>$(document).ready(function() {$("#gate option[value='']").prop('selected', true);});</script>
小开

有很多方法可以做到这一点，但是最干净的方法已经在顶部答案和超过val()的大量参数中丢失了。从jQuery 1.6开始，一些方法也发生了变化，所以这需要更新。

对于以下示例，我将假设变量$select是一个指向所需<select>标签的jQuery对象，例如通过以下方式：

var $select = $('.selDiv .opts');

注1-使用val（）进行值匹配：

对于值匹配，使用val()比使用属性选择器简单得多：https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

.val()的setter版本是在select标签上实现的，方法是将匹配的option的selected属性设置为相同的value，因此在所有现代浏览器上都可以正常工作。

注2-使用道具（“选定”，true）：

如果要直接设置选项的选定状态，可以使用prop（不是attr）和boolean参数（而不是文本值selected）：

例如https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

注3-允许未知值：

如果您使用val()选择<option>，但val不匹配（可能会发生，具体取决于值的来源），则选择“无”，$select.val()将返回null。

因此，对于所示的示例，为了健壮性，您可以使用类似于https://jsfiddle.net/1250Ldqn/的内容：

var $select = $('.selDiv .opts');$select.val("SEL2");if ($select.val() == null) {$select.val("DEFAULT");}

注4-完全文本匹配：

如果您想通过精确的文本进行匹配，您可以使用filter和函数。例如https://jsfiddle.net/yz7tu49b/2/：

var $select = $('.selDiv .opts');$select.children().filter(function(){return this.text == "Selection 2";}).prop('selected', true);

虽然如果您可能有额外的空格，您可能希望在检查中添加修剪，如 

    return $.trim(this.text) == "some value to match";

注5-按索引匹配

如果您想通过索引进行匹配，只需索引选择的子级，例如https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');var index = 2;$select.children()[index].selected = true;

尽管我现在倾向于避免直接的DOM属性，转而使用jQuery，使用面向未来的代码，因此也可以像https://jsfiddle.net/yz7tu49b/5/一样完成：

var $select = $('.selDiv .opts');var index = 2;$select.children().eq(index).prop('selected', true);

注6-使用change（）触发新选择

在上述所有情况下，更改事件都不会触发。这是设计的，因此您不会以递归更改事件结束。

要生成更改事件，如果需要，只需向jQueryselect对象添加对.change()的调用。例如，第一个最简单的例子变成了https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');$select.val("SEL2").change();

还有很多其他方法可以使用属性选择器来查找元素，例如[value="SEL2"]，但您必须记住，与所有其他选项相比，属性选择器相对较慢。

小开

谢谢你的问题。希望这段代码对你有用。

var val = $("select.opts:visible option:selected ").val();
小开

对于使用触发选定设置选择值： 

$('select.opts').val('SEL1').change();

对于从范围设置选项：

$('.selDiv option[value="SEL1"]').attr('selected', 'selected').change();

这段代码使用选择器找出带有条件的选择对象，然后将选定的属性更改为attr()。

此外，我建议在将属性设置为selected后添加change()事件，通过这样做，代码将接近更改用户选择。

小开

试试这个

您只需使用选择字段id而不是#id（即#select_name）

而不是选项值使用您的选择选项值

 <script>$(document).ready(function() {$("#id option[value='option value']").attr('selected',true);});</script>
小开

确切地说，它将工作尝试下面的方法

对于普通选择选项

<script>$(document).ready(function() {$("#id").val('select value here');});</script>

对于选择2选项触发选项需要使用

<script>$(document).ready(function() {$("#id").val('select value here').trigger('change');});</script>
小开 
    $('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");
小开

有一些建议为什么你应该使用prop而不是attr.绝对使用prop，因为我已经测试了两者，attr会给你奇怪的结果，除了最简单的情况。

我想要一个解决方案，从任意分组的select选项中进行选择会自动选择同一页面上的另一个select输入。例如，如果您有两个下拉列表-一个用于国家，另一个用于大洲。在这种情况下，选择任何国家都会自动选择另一个大陆的下拉列表。

$("#country").on("change", function() {//get continentvar originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent correctly with prop$('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);});


$("#country2").on("change", function() {//get continentvar originLocationRegion = $(this).find(":selected").data("origin-region");
//select continent wrongly with attr$('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"><form><h4 class="text-success">Props to the good stuff ;) </h4><div class="form-row"><div class="form-group col-md-6 col-sm-6"><label>Conuntries</label><select class="custom-select country" id="country"><option disabled selected>Select Country </option><option data-origin-region="Asia" value="Afghanistan">Afghanistan</option><option data-origin-region="Antartica" value="Antartica">Antartica</option><option data-origin-region="Australia" value="Australia">Australia</option><option data-origin-region="Europe" value="Austria">Austria</option><option data-origin-region="Asia" value="Bangladesh">Bangladesh</option><option data-origin-region="South America" value="Brazil">Brazil</option><option data-origin-region="Africa" value="Cameroon">Cameroon</option><option data-origin-region="North America" value="Canada">Canada</option><option data-origin-region="South America" value="Chile">Chile</option><option data-origin-region="Asia" value="China">China</option><option data-origin-region="South America" value="Ecuador">Ecuador</option><option data-origin-region="Australia" value="Fiji">Fiji</option><option data-origin-region="North America" value="Mexico">Mexico</option><option data-origin-region="Australia" value="New Zealand">New Zealand</option><option data-origin-region="Africa" value="Nigeria">Nigeria</option><option data-origin-region="Europe" value="Portugal">Portugal</option><option data-origin-region="Africa" value="Seychelles">Seychelles</option><option data-origin-region="North America" value="United States">United States</option><option data-origin-region="Europe" value="United Kingdom">United Kingdom</option></select></div><div class="form-group col-md-6 col-sm-6"><label>Continent</label><select class="custom-select" id="continent"><option disabled selected>Select Continent</option><option disabled value="Africa">Africa</option><option disabled value="Antartica">Antartica</option><option disabled value="Asia">Asia</option><option disabled value="Europe">Europe</option><option disabled value="North America">North America</option><option disabled value="Australia">Australia</option><option disabled value="South America">South America</option></select></div></div></form><hr>
<form><h4 class="text-danger"> Attributing the bad stuff to attr </h4><div class="form-row"><div class="form-group col-md-6 col-sm-6"><label>Conuntries</label><select class="custom-select country-2" id="country2"><option disabled selected>Select Country </option><option data-origin-region="Asia" value="Afghanistan">Afghanistan</option><option data-origin-region="Antartica" value="Antartica">Antartica</option><option data-origin-region="Australia" value="Australia">Australia</option><option data-origin-region="Europe" value="Austria">Austria</option><option data-origin-region="Asia" value="Bangladesh">Bangladesh</option><option data-origin-region="South America" value="Brazil">Brazil</option><option data-origin-region="Africa" value="Cameroon">Cameroon</option><option data-origin-region="North America" value="Canada">Canada</option><option data-origin-region="South America" value="Chile">Chile</option><option data-origin-region="Asia" value="China">China</option><option data-origin-region="South America" value="Ecuador">Ecuador</option><option data-origin-region="Australia" value="Fiji">Fiji</option><option data-origin-region="North America" value="Mexico">Mexico</option><option data-origin-region="Australia" value="New Zealand">New Zealand</option><option data-origin-region="Africa" value="Nigeria">Nigeria</option><option data-origin-region="Europe" value="Portugal">Portugal</option><option data-origin-region="Africa" value="Seychelles">Seychelles</option><option data-origin-region="North America" value="United States">United States</option><option data-origin-region="Europe" value="United Kingdom">United Kingdom</option></select></div><div class="form-group col-md-6 col-sm-6"><label>Continent</label><select class="custom-select" id="continent2"><option disabled selected>Select Continent</option><option disabled value="Africa">Africa</option><option disabled value="Antartica">Antartica</option><option disabled value="Asia">Asia</option><option disabled value="Europe">Europe</option><option disabled value="North America">North America</option><option disabled value="Australia">Australia</option><option disabled value="South America">South America</option></select></div></div></form></div>

如代码片段所示，prop每次都能正常工作，但一旦选择了一次选项，attr就无法正常选择。

关键点：我们通常对属性的属性感兴趣，所以在大多数情况下使用prop比attr更安全。


提交答案