javascript - 选择选项的选定属性不会自动更新

Question

我的页面上有多个选择，每个选择都有多个选项。 但是，如果我选择一个选项，则该选项的属性 selected 不会更新。这不应该自动发生吗？!

示例:

<select id="browsers">
  <option value="Firefox">Bing</option>
  <option value="InternetExplorer" selected="selected">Internet Explorer</option>
  <option value="Chrome">Chrome</option>
</select>

通过使用开发者控制台检查 DOM，您应该会看到，即使选择另一个选项后，所选属性也不会更改。

但是我找到了解决方法。为了解决这个问题，我们可以使用以下代码:

$(document).on("change","select",function() {
    $("option[value=" + this.value + "]", this)
        .attr("selected", true).siblings()
        .removeAttr("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/2.1.1/jquery.min.js"></script>
<select id="browsers">
      <option value="Firefox">Bing</option>
      <option value="InternetExplorer" selected="selected">Internet Explorer</option>
      <option value="Chrome">Chrome</option>
    </select>

这有点起作用。但是，如果我选择默认选项之外的其他选项，例如Chrome 并重新加载页面，则即使重新加载后，Chrome 选项仍处于选中状态，但所选属性仍指向 Internet Explorer!

解决这个问题的最佳方法是什么？ 我的想法是运行 $(document).ready() 上的所有选择，并选择所选属性指向的选项。

但是为什么这一切不会自动发生呢？ 这是一个错误还是一个功能？

Answer 1

selected 属性定义是否应在页面加载上选择某个元素。如果您发布带有选择元素的表单，则无论最初选择的元素如何，所选选项都将是发布的选项。

在您的情况下，您需要 selected 属性做什么？

编辑:根据您的评论，我做了一个 fiddle

fiddle 1 https://jsfiddle.net/q3fpafov/1选择你想要的

fiddle 2 https://jsfiddle.net/bge9bsa7/2/仅显示适用于所选语言的文件

我希望它符合您正在寻找的内容。 重新加载时您的选项仍然被选中的原因是基于浏览器的。但是 selected 属性对于选项的可用性没有任何作用。此外，它不会改变，因为您不会改变 HTML 元素本身的渲染方式(在页面加载时)