如何获取触发Bootstrap模态框的select选项值？

问题场景 #

你有一个带Bootstrap模态框触发属性的下拉选框，希望选中非默认选项时显示模态框，同时获取选中项的value和data-id值，填充到模态框的隐藏输入框中。之前的jQuery代码写法有误，无法正常触发模态框。

正确实现方案 #

方案一：使用jQuery实现 #

保留你的HTML结构，替换成以下JavaScript代码：

<script>
$("#value").on("change", function() {
    // 获取当前选中的option元素
    const selectedOption = $(this).find(":selected");
    const selectedValue = selectedOption.val();
    const selectedDataId = selectedOption.data("id");

    // 仅当选中非空选项时触发模态框
    if (selectedValue !== "") {
        // 填充模态框中的隐藏输入框
        $("#valueModal input[name='option_id']").val(selectedDataId);
        // 显示模态框
        $("#valueModal").modal("show");
    }
});
</script>

方案二：使用原生JavaScript实现 #

如果不想依赖jQuery，也可以用原生JS实现：

<script>
document.getElementById("value").addEventListener("change", function() {
    const selectedOption = this.options[this.selectedIndex];
    const selectedValue = selectedOption.value;
    const selectedDataId = selectedOption.getAttribute("data-id");

    if (selectedValue !== "") {
        document.querySelector("#valueModal input[name='option_id']").value = selectedDataId;
        // 初始化并显示Bootstrap模态框
        const modal = new bootstrap.Modal(document.getElementById("valueModal"));
        modal.show();
    }
});
</script>

关键说明 #

• 先获取选中的option元素，而不是直接拿select的value，这样才能同时拿到data-id属性值
• 增加空值判断，避免选中默认提示选项时触发模态框
• 模态框显示前，将获取到的data-id填充到隐藏输入框，方便后续表单提交使用
• Bootstrap 5的模态框在原生JS中需要通过new bootstrap.Modal()实例化后调用show()方法，jQuery则可以直接用modal('show')

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