选择标记的内部 HTML 不会更新所选选项

innerhtml of a select tag does not update selected option

本文关键字：更新 选项 HTML 内部 选择      更新时间：2023-09-26
<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的选定属性不反映实际的选定值？谁能解释一下这是如何工作的？

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

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

在其中键入内容。您将能够观察到属性没有更改。 .getAttribute("value") (jQuery .attr("value")( 将继续返回 Default value 。但是，.value属性(jQuery .val()(确实会更改，为您提供键入的任何内容。

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

相关文章：