如何使用 jQuery 选择 <select> 的第一个选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1414276/
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
How to make the first option of <select> selected with jQuery
提问by omg
How do I make the first option of selected with jQuery?
如何使用 jQuery 选择第一个选项？
<select id="target">
<option value="1">...</option>
<option value="2">...</option>
</select>
回答by David Andres
$("#target").val($("#target option:first").val());
回答by Esben
You can try this
你可以试试这个
$("#target").prop("selectedIndex", 0);
回答by user149513
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
function() {
$(this).removeAttr('selected');
}
);
// mark the first option as selected
$("#target option:first").attr('selected','selected');
回答by Jimmy Huang
When you use
当你使用
$("#target").val($("#target option:first").val());
this will not work in Chrome and Safari if the first option value is null.
如果第一个选项值为 null，这将在 Chrome 和 Safari 中不起作用。
I prefer
我更喜欢
$("#target option:first").attr('selected','selected');
because it can work in all browsers.
因为它可以在所有浏览器中工作。
回答by James Lee Baker
Changing the value of the select input or adjusting the selected attribute can overwrite the default selectedOptions property of the DOM element, resulting in an element that may not reset properly in a form that has had the reset event called.
更改 select 输入的值或调整 selected 属性可能会覆盖 DOM 元素的默认 selectedOptions 属性，从而导致元素可能无法在已调用重置事件的表单中正确重置。
Use jQuery's prop method to clear and set the option needed:
使用 jQuery 的 prop 方法清除和设置所需的选项：
$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
回答by danactive
$("#target")[0].selectedIndex = 0;
回答by Bradley Bossard
One subtle point I thinkI've discovered about the top voted answers is that even though they correctly change the selected value, they do not update the element that the user sees (only when they click the widget will they see a check next to the updated element).
我想我已经发现了一个关于投票最多的答案的微妙点是，即使他们正确地更改了选定的值，他们也不会更新用户看到的元素（只有当他们单击小部件时，他们才会在更新元素）。
Chaining a .change() call to the end will also update the UI widget as well.
将 .change() 调用链接到最后也将更新 UI 小部件。
$("#target").val($("#target option:first").val()).change();
(Note that I noticed this while using jQuery Mobile and a box on Chrome desktop, so this may not be the case everywhere).
（请注意，我在使用 jQuery Mobile 和 Chrome 桌面上的一个框时注意到了这一点，因此可能并非到处都是这种情况）。
回答by Melanie
If you have disabled options, you may add not([disabled])to prevent selecting them which results into the following:
如果您禁用了选项，您可以添加not([disabled])以防止选择它们，结果如下：
$("#target option:not([disabled]):first").attr('selected','selected')
回答by Nick Petropoulos
Another way to reset the values (for multiple selected elements) could be this:
另一种重置值的方法（对于多个选定元素）可能是这样的：
$("selector").each(function(){
/*Perform any check and validation if needed for each item */
/*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */
this.selectedIndex=0;
});
回答by FFFFFF
$('#newType option:first').prop('selected', true);
