javascript - select 标签的 insidehtml 不会更新所选选项

Question

<select name="cs_position_id_1034362" id="cs_position_id_1034362" class="cs_position_id">
    <option value="1034314">1</option>
    <option value="1034315" selected="selected">2</option>
    <option value="1034316">3</option>
    <option value="1034317">4</option>
    <option value="1034318">5</option>
    <option value="1034319">6</option>
</select>

$("body").on("change", ".cs_position_id", function(){
    var cs_select = $(this);
    var cs_select_html = cs_select.html();
    alert(cs_select_html);
});

一旦运行，html 的 selected 属性不会反射(reflect)实际选择的值？谁能解释一下这是如何工作的？

Answer 1

您所看到的是属性和属性之间的区别。

一个更简单的例子是使用 <input type="text" value="Default value" />

在其中输入一些内容。您将能够观察到属性没有发生变化。 .getAttribute("value") (jQuery .attr("value") )将继续返回 Default value 。然而.value 属性(jQuery .val())确实改变，给你输入的任何内容。

同样的原则也适用于您的下拉菜单。这就是为什么 jQuery 选择器是 :selected ，而不是 [selected=selected] 。第一个获取当前选择的选项，而第二个获取默认选择的选项。