使用JavaScript动态添加select选项后无法设置选中项的问题

你遇到的问题核心在于：jQuery的attr()方法操作的是元素的HTML属性，而动态添加的option的选中状态需要操作DOM属性。静态选项因为HTML属性和DOM属性初始同步，所以attr()能生效，但动态添加的元素两者不会自动同步，导致设置无效。

给你两种可行的解决方法：

方法1：直接设置select的value（推荐） #

这是最简洁的方式，无需手动处理option的选中状态，select会自动匹配对应value的选项并设为选中：

$("#heritage").val(heritage_id);

你的heritage_id为28，只要选项中存在value为28的项，就能直接选中目标选项。

方法2：用prop()替代attr()操作DOM属性 #

如果需要手动操作option的选中状态，改用prop()方法（它专门处理DOM对象的状态属性，比如selected、checked这类）：

// 取消当前选中项
$("#heritage option:selected").prop("selected", false);
// 设置目标选项为选中
$("#heritage option[value='" + heritage_id + "']").prop("selected", true);

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