jQuery 设置选择框的选中选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4680075/
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 selected option of select box
提问by Upvote
I want to set a option that was selected previously to be displayed on page load. I tried it with the following code:
我想设置一个先前选择的选项以在页面加载时显示。我用下面的代码试了一下：
$("#gate").val('Gateway 2');
with
和
<select id="gate">
<option value='null'>- choose -</option>
<option value='gateway_1'>Gateway 1</option>
<option value='gateway_2'>Gateway 2</option>
</select>
But this does not work. Any ideas?
但这不起作用。有任何想法吗？
回答by Darin Dimitrov
This definitely should work. Here's a demo. Make sure you have placed your code into a $(document).ready:
这绝对应该有效。这是一个演示。确保您已将代码放入$(document).ready：
$(function() {
$("#gate").val('gateway_2');
});
回答by Zkoh
$(document).ready(function() {
$("#gate option[value='Gateway 2']").prop('selected', true);
// you need to specify id of combo to set right combo, if more than one combo
});
回答by Marty Hirsch
$('#gate').val('Gateway 2').prop('selected', true);
$('#gate').val('Gateway 2').prop('selected', true);
回答by Mike
I have found using the jQuery .val() method to have a significant drawback.
我发现使用 jQuery .val() 方法有一个明显的缺点。
<select id="gate"></select>
$("#gate").val("Gateway 2");
If this select box (or any other input object) is in a form and there is a reset button used in the form, when the reset button is clicked the set value will get cleared and not reset to the beginning value as you would expect.
如果此选择框（或任何其他输入对象）在表单中并且表单中使用了重置按钮，则单击重置按钮时，设置的值将被清除，而不是像您期望的那样重置为起始值。
This seems to work the best for me.
这似乎对我来说效果最好。
For Select boxes
对于选择框
<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);
For text inputs
对于文本输入
<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")
For textarea inputs
对于文本区域输入
<textarea id="gate"></textarea>
$("#gate").html("your desired value")
For checkbox boxes
对于复选框
<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);
For radio buttons
对于单选按钮
<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);
回答by Mohd Bashir
$("#form-field").val("5").trigger("change");
回答by Posted
I had the same problem.
我有同样的问题。
Solution: add a refresh.
解决方法：添加刷新。
$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
回答by James Wiseman
That works fine. See this fiddle: http://jsfiddle.net/kveAL/
这很好用。看到这个小提琴：http: //jsfiddle.net/kveAL/
It is possible that you need to declare your jQuery in a $(document).ready()handler?
您可能需要在$(document).ready()处理程序中声明您的 jQuery吗？
Also, might you have two elements that have the same ID?
另外，您可能有两个具有相同 ID 的元素吗？
回答by Kent Aguilar
This would be another option:
这将是另一种选择：
$('.id_100 option[value=val2]').prop('selected', true);
回答by SyWill
I know there are several iterations of answers but now this doesn't require jquery or any other external library and can be accomplished pretty easy just with the following.
我知道有几次迭代的答案，但现在这不需要 jquery 或任何其他外部库，只需使用以下内容即可轻松完成。
document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);<select id="gate">
<option value='null'>- choose -</option>
<option value='Gateway 1'>Gateway 1</option>
<option value='Gateway 2'>Gateway 2</option>
</select>回答by hemil
Some cases may be
有些情况可能是
$('#gate option[value='+data.Gateway2+']').attr('selected', true);
