Javascript 选择选项未更新 HTML 网页中的“选定”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32297355/
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
Select option is not updated 'selected' property in HTML web page
提问by Vyacheslav
Please, explain how can I change 'selected' property of option? E.g.:
请解释如何更改选项的“选定”属性？例如：
<select id="lang_select">
<option value="en" selected="selected">english</option>
<option value="ar">???????</option>
<option value="az">az?rbaycanl?</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="cs">?esky</option>
<!-- some data cut -->
</select>
So, if I change the drop down list value nothing is changed in html-data. Why?
因此，如果我更改下拉列表值，html-data 中没有任何更改。为什么？
Only if I try to force reload the property using jQuery it works.
只有当我尝试使用 jQuery 强制重新加载属性时，它才有效。
$(document).on('change',"select",function(){
var i = $(this)[0].selectedIndex;
var ch = $(this).children().each(function(index){
$(this).prop('selected',index == i);
if (index == i) {
$(this).attr('selected','selected');
} else {
$(this).removeAttr('selected');
}
});
});
Why? How can I avoid this? Is it possible to change "selected" using pure html?
为什么？我怎样才能避免这种情况？是否可以使用纯 html 更改“选定”？
EDITI namely want this attrbute in html tag because I need to save and restore the part of this html-code in future.
编辑我希望在 html 标签中使用这个属性，因为我需要在将来保存和恢复这个 html 代码的一部分。
回答by guest271314
Updated, substituted .attr("selected", true)for .prop("selected", true)
更新，取代.attr("selected", true)对.prop("selected", true)
Note , value of selectedattribute returns trueor false, not "selected".
注意，selected属性值返回trueor false， not "selected"。
Try utilizing selector $("option[value=" + this.value + "]", this), set property selectedto true, .siblings()to remove selectedattribute from optionnot selected
尝试使用选择器$("option[value=" + this.value + "]", this)，将属性设置selected为true，从未选择中.siblings()删除selected属性option
$(document).on("change","select",function(){
$("option[value=" + this.value + "]", this)
.attr("selected", true).siblings()
.removeAttr("selected")
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="lang_select">
<option value="en" selected="true">english</option>
<option value="ar">???????</option>
<option value="az">az?rbaycanl?</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="cs">?esky</option>
<!-- some data cut -->
</select>回答by Mosh Feu
It's not change the htmlitself but it does change the value of the select
它不会改变它html本身，但它确实改变了select
$('select').change(function(){
$('#result').html($(this).val());
}).trigger('change');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lang_select">
<option value="en" selected="selected">english</option>
<option value="ar">???????</option>
<option value="az">az?rbaycanl?</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="cs">?esky</option>
<!-- some data cut -->
</select>
<hr />
<div id="result"></div>回答by André Silva
Use the val()method. So in your case, $("#lang_select").val('en');selects the english option. And by the way if you want the first option to be selected you don't need the selected="selected". By default the first option is automatically selected.
使用val()方法。所以在你的情况下，$("#lang_select").val('en');选择英语选项。顺便说一句，如果您想选择第一个选项，则不需要selected="selected". 默认情况下会自动选择第一个选项。
