如何使用 Javascript 或 jQuery 在选项属性中添加“selected”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12557999/
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 add "selected" in option attribute using Javascript or jQuery?
提问by rusly
Below is code for select option and generate using php from database and i try to add selected="selected"to value="4"using jQuery or any javascript:
下面是选择选项的代码，并使用数据库中的 php 生成，我尝试添加selected="selected"到value="4"使用 jQuery 或任何 javascript：
<select id="countryselect" name="country">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">Malaysia</option>
<option value="5">Maldives</option>
</select>
i try to refer this post but still can't .. below is my current script :
我尝试参考这篇文章，但仍然不能......下面是我当前的脚本：
<script>
localStorage.setItem("Select1", "Malaysia");
$('#countryselect').find('option').each(function(i,e){
if($(e).val() == localStorage.getItem("Select1")){
$('#countryselect').prop('selectedIndex',i);
}
});
</script>
thanks.
谢谢。
回答by Muthu Kumaran
This should work simple, $("#countryselect").val('4')?
这应该很简单， $("#countryselect").val('4')?
It will automatically set selected=selected
它会自动设置 selected=selected
回答by Samar Rizvi
localStorage.getItem("Select1")will return Malaysia and $(e).val()will return 1,2...5 in each loop. So your condition will never be true. Instead use
localStorage.getItem("Select1")将返回马来西亚，$(e).val()并将在每个循环中返回 1,2...5。所以你的条件永远不会是真的。而是使用
<script>
localStorage.setItem("Select1", "4");
$('#countryselect').find('option').each(function(i,e){
if($(e).val() == localStorage.getItem("Select1")){
$('#countryselect').prop('selectedIndex',i);
}
});
</script>
回答by RobG
The selectedattribute is a boolean attribute, its presence sets the value of the related DOM property to true. If the attribute is absent, the value of the selected property is false.
该selected属性是一个布尔属性，它的存在将相关 DOM 属性的值设置为true. 如果该属性不存在，则所选属性的值为false。
If an option has the selected attribute, then when the page is first loaded, or the form the control is in is reset, that option will be the selected option.
如果一个选项具有 selected属性，那么当页面第一次加载时，或者控件所在的表单被重置时，该选项将是选定的选项。
If the option's selected propertyis set to true, then that option will be selected. However, if the form is reset, the default selected option will be selected (i.e. the one with the selected attribute, or the first option, or none).
如果选项的 selected属性设置为true，则将选择该选项。但是，如果表单被重置，则默认选中的选项将被选中（即具有 selected属性的选项，或第一个选项，或无）。
To set the selected attribute (i.e. make the option the default selected option):
要设置 selected 属性（即使该选项成为默认选择的选项）：
var select = document.getElementById('countryselect');
var option;
for (var i=0; i<select.options.length; i++) {
option = select.options[i];
if (option.value == '4') {
// or
// if (option.text == 'Malaysia') {
option.setAttribute('selected', true);
// For a single select, the job's done
return;
}
}
Note that this may not make the option the currently selected option, it will just add the selected attribute. To make sure it's selected (if that is what is required), the also set the selected property to true(see below).
请注意，这可能不会使该选项成为当前选定的选项，它只会添加 selected 属性。为了确保它被选中（如果这是必需的），还可以将 selected 属性设置为true（见下文）。
Note that the second argument to setAttributeis supposed to be a string that is used to set the attribute's value. However, the selected attribute doesn't have a "setable" value, so the second argument is ignored (e.g. even falsewill still set the attribute and make the option the default selected option). That causes some confusion. :-)
请注意，setAttribute的第二个参数应该是用于设置属性值的字符串。但是，所选属性没有“可设置”值，因此第二个参数将被忽略（例如，即使false仍会设置该属性并使该选项成为默认选定选项）。这会引起一些混乱。:-)
To set the selected property (i.e. just make the option the current selected option):
要设置 selected 属性（即只使该选项成为当前选定的选项）：
var select = document.getElementById('countryselect');
var option;
for (var i=0; i<select.options.length; i++) {
option = select.options[i];
if (option.value == '4') {
// or
// if (option.text == 'Malaysia') {
option.selected = true;
return;
}
}
回答by sidarcy
As of jQuery 1.6 "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."
从 jQuery 1.6 开始，“要检索和更改 DOM 属性，例如表单元素的选中、选中或禁用状态，请使用 .prop() 方法。”
$("#countryselect option[value=4]").prop("selected", "selected")
回答by Sushanth --
回答by Rahul
$('#countryselect > option[value *= "4"] ').attr('selected',true);
this will work
这会起作用
