JQuery设置Dropdown下拉框selected选中项仅前两次生效问题求助

你这个问题的核心是混用了jQuery的attr()和prop()方法，且没有清除旧的选中状态导致的：

• HTML标签上的selected是静态属性，只会在页面首次渲染时生效
• 后续动态修改选中状态要操作DOM的selected property，用prop()方法，不能用attr()
• 你之前的写法每次给新option加selected属性，不会清除旧option的selected属性，多次操作后多个option都带有selected属性，浏览器会优先识别最后一个带该属性的option，就出现了后续选中失效的问题

最优解决方案 #

直接用下拉框的val()方法赋值即可，这是jQuery封装好的专门用于给表单元素赋值的方法，代码更简洁：

if(data['insurance'] != ''){  
   console.log(data['insurance']);
   $('#insurance').val(data['insurance']);
}

如果需要单独操作option实现选中，用下面的写法：

if(data['insurance'] != ''){  
   console.log(data['insurance']);
   // 先清空所有选中状态
   $('#insurance option').prop('selected', false);
   // 给目标option设置选中property
   $('#insurance option[value="'+data["insurance"]+'"]').prop('selected', true);
}

修改后即可正常反复切换选中状态。

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