jQuery 按值设置选择选项“已选择”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13343566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set select option 'selected', by value
提问by w00
I have a selectfield with some options in it. Now I need to select one of those optionswith jQuery. But how can I do that when I only know the valueof the optionthat must be selected?
我有一个select包含一些选项的字段。现在我需要options使用 jQuery选择其中之一。但是，我怎么能做到这一点时，我只知道value的option是一定要选择？
I have the following HTML:
我有以下 HTML：
<div class="id_100">
<select>
<option value="val1">Val 1</option>
<option value="val2">Val 2</option>
<option value="val3">Val 3</option>
</select>
</div>
I need to select the option with value val2. How can this be done?
我需要选择带有 value 的选项val2。如何才能做到这一点？
Here's a demo page: http://jsfiddle.net/9Stxb/
这是一个演示页面：http: //jsfiddle.net/9Stxb/
回答by pinghsien422
There's an easier way that doesn't require you to go into the options tag:
有一种更简单的方法，不需要您进入 options 标签：
$("div.id_100 select").val("val2");
Check out the this jQuery method.
查看这个jQuery 方法。
回答by Kirill Ivlev
To select an option with value 'val2':
要选择值为 'val2' 的选项：
$('.id_100 option[value=val2]').attr('selected','selected');
回答by jitendrapurohit
Use the change()event after selecting the value. From the docs:
change()选择值后使用事件。从文档：
If the field loses focus without the contents having changed, the event is not triggered. To trigger the event manually, apply
.change()without arguments:
如果字段在内容没有改变的情况下失去焦点，则不会触发该事件。要手动触发事件，请
.change()不带参数应用：
$("#select_id").val("val2").change();
More information is at .change().
更多信息在.change()。
回答by silly
Deselect all first and filter the selectable options:
首先取消全选并过滤可选选项：
$('.id_100 option')
.removeAttr('selected')
.filter('[value=val1]')
.attr('selected', true)
回答by Developer
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
<option value="1">Completed</option>
<option value="2">Pending</option>
<option value="3">Cancelled</option>
<option value="4">Failed</option>
<option value="5">In Progress</option>
<option value="6">Overdue</option>
<option value="7">Refunded</option>
Setting to Pending Status by value
按值设置为挂起状态
$('#contribution_status_id').val("2");
回答by Taran
For me the following did the job
对我来说，以下工作完成了
$("div.id_100").val("val2").change();
回答by Dipu
I think the easiest way is selecting to set val(), but you can check the following. See How to handle select and option tag in jQuery?for more details about options.
我认为最简单的方法是选择设置 val()，但您可以检查以下内容。请参阅如何在 jQuery 中处理选择和选项标签？有关选项的更多详细信息。
$('div.id_100 option[value="val2"]').prop("selected", true);
$('id_100').val('val2');
Not optimised, but the following logic is also useful in some cases.
未优化，但以下逻辑在某些情况下也很有用。
$('.id_100 option').each(function() {
if($(this).val() == 'val2') {
$(this).prop("selected", true);
}
});
回答by Rune FS
You can select on any attribute and its value by using the attribute selector [attributename=optionalvalue], so in your case you can select the option and set the selected attribute.
您可以使用属性选择器选择任何属性及其值[attributename=optionalvalue]，因此在您的情况下，您可以选择该选项并设置所选属性。
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
Where valueis the value you wish to select by.
value您希望选择的值在哪里。
If you need to removed any prior selected values, as would be the case if this is used multiple times you'd need to change it slightly so as to first remove the selected attribute
如果您需要删除任何先前选择的值，就像多次使用的情况一样，您需要稍微更改它以便首先删除所选属性
$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
.prop("selected",true);
回答by Daniel Carpio Contreras
Best way is like this:
最好的方法是这样的：
$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
回答by Yitzhak
There's no reason to overthink this, all you are doing is accessing and setting a property. That's it.
没有理由过度考虑这一点，您所做的只是访问和设置属性。就是这样。
Okay, so some basic dom:If you were doing this in straight JavaScript, it you would this:
好的，那么一些基本的 dom:如果你直接用 JavaScript 来做这件事，你会这样：
window.document.getElementById('my_stuff').selectedIndex = 4;
But you're not doing it with straight JavaScript, you're doing it with jQuery. And in jQuery, you want to use the .prop() function to set a property, so you would do it like this:
但是你不是用直接的 JavaScript 来做的，你是用 jQuery 来做的。在 jQuery 中，你想使用 .prop() 函数来设置一个属性，所以你可以这样做：
$("#my_stuff").prop('selectedIndex', 4);
Anyway, just make sure your id is unique. Otherwise, you'll be banging your head on the wall wondering why this didn't work.
无论如何，只要确保您的 id 是唯一的。否则，你会用头撞墙，想知道为什么这不起作用。
