Select 选项未在 HTML 网页中更新 'selected' 属性

Question

请解释一下如何更改 'selected' 属性选项？例如：

<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">český</option>
    <!-- some data cut -->
</select>

因此，如果我更改下拉列表值，html-data 中的任何内容都不会更改。为什么？

只有当我尝试使用 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');
        }
    });
});

为什么？我怎样才能避免这种情况？是否可以使用纯 html 来更改 "selected"？

编辑我就是想在 html 标签中添加此属性，因为我需要在将来保存和恢复此 html 代码的一部分。

Answer 1

使用val()方法。因此，在您的情况下，$("#lang_select").val('en'); 选择英语选项。顺便说一句，如果您希望选择第一个选项，则不需要 selected="selected"。默认情况下会自动选择第一个选项。

Answer 2

它不会更改 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">český</option>
  <!-- some data cut -->
</select>
<hr />
<div id="result"></div>

Answer 3

已更新，用 .attr("selected", true) 代替 .prop("selected", true)

注意，selected 属性 returns true 或 false 的值，而不是 "selected".

尝试利用选择器 $("option[value=" + this.value + "]", this) ，将属性 selected 设置为 true ，.siblings() 从 [=23= 中删除 selected 属性] 未选中

$(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">český</option>
<!-- some data cut -->

</select>

Select 选项未在 HTML 网页中更新 'selected' 属性

Select option is not updated 'selected' property in HTML web page

javascript

jquery

html

html-select