如何在选择Bootstrap 5下拉选项后显示模态框并获取选中值？

核心问题分析 #

1. 下拉选项自带的data-bs-toggle="modal"和data-bs-target="#valueModal"是Bootstrap内置的模态框触发属性，会自动触发模态框，和自定义JS逻辑冲突。
2. 原JS代码末尾的.change()会在页面加载完成后立即触发一次change事件，导致模态框默认打开。
3. 原JS中$('#valueModal').modal('show')(this.value === 'option_id')的写法逻辑错误，判断条件位置不对。

具体修改步骤 #

• 移除自动触发属性：删掉下拉选项里的data-bs-toggle="modal"和data-bs-target="#valueModal"，让模态框显示完全由JS控制。
• 修正JS逻辑：去掉.change()避免页面加载时自动触发；在change事件内判断选中值是否为空，仅选中有效选项时才显示模态框，并将选中值赋值给模态框的隐藏字段。

修改后的完整代码 #

下拉表单代码

<form action="#" class="modal-content">
    <select class="form-select" id="value" name="value">
        <option value="">Select an option</option>
        <option value="1" data-id="1">Number of Document</option>
        <option value="2" data-id="2">Date</option>
        <option value="3" data-id="3">Seller name</option>
        <option value="4" data-id="4">Create date</option>
    </select>
</form>

模态框代码（结构无需修改）

<div class="modal fade" id="valueModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="valueModal" aria-hidden="true">
    <div class="modal-dialog">
        <form action="#" class="modal-content">
            <input value="" name="option_id" type="hidden">
            <div class="modal-header">
                <h5 class="modal-title" id="valueModal">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <!-- Multi Forms -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </form>
    </div>
</div>

JavaScript代码

$("#value").on("change", function () {
    const selectedValue = $(this).val();
    // 仅选中有效选项时显示模态框
    if (selectedValue !== "") {
        // 将选中值赋值给模态框的隐藏字段
        $('#valueModal input[name="option_id"]').val(selectedValue);
        // 打开模态框
        $('#valueModal').modal('show');
    }
});

额外说明 #

如果需要传递选项的data-id值而非value值，只需把JS里的selectedValue = $(this).val()改成selectedValue = $(this).find("option:selected").data("id")即可。

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