如何在 jQuery 的 SELECT 元素中选择特定选项？
如果您知道索引、值或文本。如果您没有直接参考的 ID。
示例标记
<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>
$("#my_select").val("the_new_value").change(); ... ... 来自 so
按值获取中间选项元素的选择器是
$('.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”上的匹配项可能是不需要的。我发现没有 selector 与全文匹配，但 filter 有效：
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3：请谨慎使用 $(e).text()，因为它可能包含导致比较失败的换行符。 This happens when the options are implicitly closed (no </option> tag):
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
如果您只使用 e.text，任何额外的空格（如尾随换行符）都将被删除，从而使比较更加可靠。
上述方法都没有提供我需要的解决方案，所以我想我会提供对我有用的方法。
$('#element option[value="no"]').attr("selected", "selected");
prop 而不是 attr。
.attr 是正确的。 “selected”是<option>的属性。 w3.org/TR/html5/forms.html#attr-option-selected
prop 而不是 attr。这样就不必在 w3.org 上查找每个属性，以查看它是否只是一个属性，或者是通过支持操作实现的。
您可以只使用 val() 方法：
$('select').val('the_value');
the_value。 .val 不是选择器/过滤器功能！它是一个属性访问器，并将该字符串设置为值。我试图收回我的赞成票，但在我在测试中意识到这一点之后为时已晚。
select 上的 val() 设置器是通过设置值匹配的子 option 的 selected 属性来实现的，因此确实可以满足问题的要求（但仅用于值搜索而不是文本搜索）。
按价值计算，使用 jQuery 1.7 对我有用的是下面的代码，试试这个：
$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
.change() 是必需的。我有一个基于 SELECT 切换缩略图的示例。当我上传自定义主题时，它应该从选项列表中选择“自定义主题”。 .prop() 调用有效，但没有 .change()，我的选择右侧的缩略图永远不会更新。
prop 值生成相同的输出。例如.prop('selected', true)
有很多方法可以做到这一点，但最干净的方法已经在 val() 的热门答案和大量参数中丢失了。从 jQuery 1.6 开始，一些方法也发生了变化，因此需要更新。
对于以下示例，我将假设变量 $select 是一个指向所需 <select> 标记的 jQuery 对象，例如通过以下方式：
var $select = $('.selDiv .opts');
注 1 - 使用 val() 进行值匹配：
对于值匹配，使用 val() 比使用属性选择器简单得多：https://jsfiddle.net/yz7tu49b/6/
$select.val("SEL2");
.val() 的 setter 版本是通过将匹配 option 的 selected 属性设置为相同的 value 来在 select 标记上实现的，因此在所有现代浏览器上都可以正常工作。
注 2 - 使用 prop('selected', 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 with 函数。例如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() 触发新选择
在上述所有情况下，更改事件都不会触发。这是设计使然，这样您就不会遇到递归更改事件。
如果需要，要生成更改事件，只需向 jQuery select 对象添加对 .change() 的调用。例如，第一个最简单的例子变成 https://jsfiddle.net/yz7tu49b/7/
var $select = $('.selDiv .opts');
$select.val("SEL2").change();
还有很多其他方法可以使用属性选择器查找元素，例如 [value="SEL2"]，但您必须记住，与所有其他选项相比，属性选择器相对较慢。
使用 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
确实可以尝试以下方法
对于普通选择选项
<script>
$(document).ready(function() {
$("#id").val('select value here');
});
</script>
对于选择 2 选项触发选项需要使用
<script>
$(document).ready(function() {
$("#id").val('select value here').trigger('change');
});
</script>
$(elem).find('option[value="' + value + '"]').attr("selected", "selected");
您可以命名选择并使用它：
$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);
它应该选择您想要的选项。
回答我自己的文档问题。我敢肯定还有其他方法可以实现这一点，但这是可行的，并且此代码已经过测试。
<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 div
function() {
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>
在选择触发的情况下设置选择值：
$('select.opts').val('SEL1').change();
从范围设置选项：
$('.selDiv option[value="SEL1"]')
.attr('selected', 'selected')
.change();
此代码使用选择器找出带有条件的选择对象，然后将选定属性更改为 attr()。
此外，我建议在将属性设置为 selected 后添加 change() 事件，这样代码将接近于更改用户的选择。
尝试这个
您只需使用选择字段 id 而不是 #id (ie.#select_name)
而不是选项值使用您选择的选项值
<script>
$(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
});
</script>
当我知道列表的索引时，我会使用它。
$("#yourlist :nth(1)").prop("selected","selected").change();
这允许列表更改，并触发更改事件。 ":nth(n)" 从索引 0 开始计数
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");
// or
$('#select option[value="myValue"]').prop("selected",true).trigger("change");
我会去： -
$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='']").prop('selected', true);
});
</script>
如果您将属性发送到函数并需要更新选择选项，则选择 Jquery
$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
如果你不想使用 jQuery，你可以使用下面的代码：
document.getElementById("mySelect").selectedIndex = "2";
$('select').val('the_value'); 看起来是正确的解决方案，如果您有数据表行，则：
$row.find('#component').val('All');
谢谢你的问题。希望这段代码对你有用。
var val = $("select.opts:visible option:selected ").val();
有一些建议为什么您应该使用 prop 而不是 attr. 一定要使用 prop，因为我已经测试过这两种情况，并且 attr 会给您带来奇怪的结果，除了最简单的情况。
我想要一个解决方案，从任意分组的 select 选项中选择会自动选择同一页面上的另一个 select 输入。例如，如果您有 2 个下拉菜单 - 一个用于国家/地区，另一个用于大洲。在这种情况下，选择任何国家会自动在另一个大陆下拉列表中选择该国家的大陆。
$("#country").on("change", function() { //获取大陆 var originLocationRegion = $(this).find(":selected").data("origin-region"); //选择大陆正确使用道具 $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true); }); $("#country2").on("change", function() { //获取大陆 var originLocationRegion = $(this).find(":selected").data("origin-region"); //select大陆错误地使用 attr $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true); });
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。