如何使用jQuery实现Bootstrap模态框内select下拉框的选中值联动

原代码错误点 #

• 选择器语法错误：id选择器必须加#前缀，原代码$("event_picto")缺少前缀，无法定位到第二个下拉框元素
• 业务逻辑错误：需求是选中已有的normal选项，而非清空所有选项仅保留normal，原代码使用html()重写下拉框选项不符合需求，直接用val()方法设置对应值即可
• 语法不完整：事件绑定的回调函数末尾缺少右括号闭合，代码本身无法正常解析执行

如果你的Bootstrap模态框是动态生成的（比如点击按钮后才渲染到DOM中），直接绑定change事件会因为绑定时元素不存在而失效，需要改用事件委托绑定到页面的静态父元素上。

最终可运行代码 #

// 模态框为页面初始就存在的静态元素时用这个写法
$("#event_status").change(function() {
    var val = $(this).val();
    if (val === "ended") {
        $("#event_picto").val("img/eventgreen.svg");
        // 如果有其他监听event_picto变化的逻辑，可加下面这行触发回调
        // $("#event_picto").trigger('change');
    }
});

// 模态框为动态生成时用事件委托写法，保证事件绑定生效
// $(document).on('change', '#event_status', function() {
//     var val = $(this).val();
//     if (val === "ended") {
//         $("#event_picto").val("img/eventgreen.svg");
//     }
// });

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