如何在jQuery中为下拉列表的选中项设置selected属性？

嗨，我来帮你修正这个问题～你当前的代码在change事件里固定把Saab设为选中状态，这不管用户实际选了什么都会强制选中它，显然不符合你“同步到新选中项”的需求。下面是正确的实现方式：

正确的代码实现 #

首先，我们需要在页面加载时先给默认选中的选项加上selected="selected"属性，然后在下拉选项切换时，同步更新这个属性到新选中的项：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="">
  Name: <input type="text" name="user"><br>
  Car: <select id="to">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
  </select>
</form>

<script>
$(document).ready(function() {
  // 页面加载时，给默认选中的项添加selected属性
  $("#to option:selected").attr("selected", "selected");
  
  // 下拉选项切换时的处理
  $("#to").change(function() {
    // 先移除所有选项的selected属性
    $("#to option").removeAttr("selected");
    // 给当前选中的项添加selected属性
    $(this).find("option:selected").attr("selected", "selected");
  });
});
</script>

代码解释 #

• 页面加载阶段：$("#to option:selected").attr("selected", "selected") 会找到下拉框默认选中的选项（默认是第一个），给它加上selected="selected"属性，保证初始状态的正确性。
• change事件触发时：
  • 首先用removeAttr("selected")移除所有选项的选中属性，避免多个选项同时带有这个属性。
  • 然后通过$(this).find("option:selected")找到当前用户选中的选项，给它添加上selected="selected"属性，完成同步。

另外，jQuery更推荐用prop()方法处理布尔类型的属性，效果一致，你也可以这么写：

// 页面加载时
$("#to option:selected").prop("selected", true);

// change事件中
$("#to option").prop("selected", false);
$(this).find("option:selected").prop("selected", true);

内容的提问来源于stack exchange，提问作者Abder KRIMA