Bootstrap模态框中无法加载动态下拉菜单问题求助

核心问题分析 #

1. 元素类型不匹配：你用<option>元素填充Bootstrap的.dropdown-menu容器，但这类下拉组件不支持<option>标签，必须使用带有.dropdown-item类的<a>或<div>元素才能正确渲染样式和触发交互。
2. 执行时机可能有误：如果JS代码在DOM未完全加载时运行，会无法获取到模态框内的selectCurrencyDefault元素，导致无法添加内容。

修正后的代码 #

HTML部分（仅需确保容器ID正确，其余无需改动） #

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Settings</h4>
            </div>
            <div class="modal-body">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Default Currency:
                    </button>
                    <div class="dropdown-menu" id="selectCurrencyDefault" aria-labelledby="dropdownMenuButton">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

JavaScript部分（修正元素类型+确保DOM加载完成后执行） #

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    var dropdownMenu = document.getElementById("selectCurrencyDefault");
    if (!dropdownMenu) return; // 避免元素不存在时报错

    var currencySelection = ["AED","AFN","ALL","AMD","ANG","AOA","ARS","AUD","AWG","AZN","BAM","BBD","BDT","BGN","BHD","BIF","BMD","BND","BOB","BRL","BSD","BTN","BWP","BYN","BZD","CAD","CDF","CHF","CLP","CNY","COP","CRC","CUP","CVE","CZK","DJF","DKK","DOP","DZD","EGP","ERN","ETB","EUR","FJD","FKP","FOK","GBP","GEL","GGP","GHS","GIP","GMD","GNF","GTQ","GYD","HKD","HNL","HRK","HTG","HUF","IDR","ILS","IMP","INR","IQD","IRR","ISK","JEP","JMD","JOD","JPY","KES","KGS","KHR","KID","KMF","KRW","KWD","KYD","KZT","LAK","LBP","LKR","LRD","LSL","LYD","MAD","MDL","MGA","MKD","MMK","MNT","MOP","MRU","MUR","MVR","MWK","MXN","MYR","MZN","NAD","NGN","NIO","NOK","NPR","NZD","OMR","PAB","PEN","PGK","PHP","PKR","PLN","PYG","QAR","RON","RSD","RUB","RWF","SAR","SBD","SCR","SDG","SEK","SGD","SHP","SLE","SOS","SRD","SSP","STN","SYP","SZL","THB","TJS","TMT","TND","TOP","TRY","TTD","TVD","TWD","TZS","UAH","UGX","USD","UYU","UZS","VES","VND","VUV","WST","XAF","XCD","XDR","XOF","XPF","YER","ZAR","ZMW","ZWL"];

    for(var i = 0; i < currencySelection.length; i++) {
        var currency = currencySelection[i];
        // 创建符合Bootstrap下拉规范的选项元素
        var item = document.createElement("a");
        item.className = "dropdown-item";
        item.href = "#"; // 不需要跳转可改为div标签并移除href
        item.textContent = currency;

        // 可选：添加点击事件，更新下拉按钮显示的选中值
        // item.addEventListener('click', function() {
        //     document.getElementById('dropdownMenuButton').textContent = "Default Currency: " + this.textContent;
        // });

        dropdownMenu.appendChild(item);
    }
});

额外优化提示 #

• 如果模态框会多次打开，建议在添加选项前先清空dropdownMenu容器，避免重复生成选项。
• 若不需要跳转功能，可将<a>标签替换为<div>标签，仅保留.dropdown-item类即可。

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