select标签的innerhtml不会更新所选选项

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的选定属性不会反映实际选定的值？ 谁能解释一下这是如何工作的？

Answer 1

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

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

在其中输入内容。您将能够观察到属性 不更改。 .getAttribute("value")（jQuery .attr("value")）将继续返回Default value。但是，.value 属性（jQuery .val()）会更改，为您提供所输入的内容。

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