使用jQuery无法选中select下拉框option选项的问题求助

核心问题点 #

• 动态追加option的代码存在语法错误：你写的option闭合标签是<option>，正确应该是</option>，该错误会导致浏览器解析出多余的空option节点，下拉选项结构混乱，无法匹配到正确的value。
• 移除默认option的选择器错误：HTML中默认提示option的class是default，你的代码中使用的是.default-depart类选择器，无法匹配到对应节点，默认选中的禁用项没有被移除，会干扰后续选中逻辑。
• 第二种选中写法的选择器错误：worker_departement_edit是select元素的id属性，你的代码中用了类选择器.worker_departement_edit，无法匹配到目标元素，设置自然不生效。
• 选中属性设置建议：对于表单元素的布尔状态（selected、checked等），使用jQuery的prop()方法比attr()更稳定，能可靠触发状态更新。

修复代码 #

首先修正动态追加option的代码：

$(".departement").append('<option value="' 
                        + element['id_departement'] 
                        + '">' + element['depart_name'] 
                        + '</option>')

再选择任意一种选中写法即可：

写法1（推荐，更简洁） #

// 修正默认项的类选择器
$("#worker_departement_edit").children(".default").remove()
// 确保执行该行时，所有option已经完成插入DOM的操作
$("#worker_departement_edit").val(datas[0]["departement"]).change();

写法2（按value匹配option） #

$(".default").remove()
// 修正id选择器，用prop设置选中状态
$("#worker_departement_edit")
 .children('option[value="' + datas[0]["departement"] + '"]')
 .prop("selected", true)

额外注意 #

如果你的option是通过异步请求（比如Ajax）获取后再追加的，必须将选中逻辑放在异步请求的成功回调函数内，确保DOM更新完成后再执行选中操作，避免出现option还没插入就执行选中代码的异常。

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