JavaScript从数组为下拉列表添加Option选项运行报错问题求助

错误原因及修复方案 #

核心错误点 #

• 变量名拼写错误：content.appendChild(DropList); 中变量名大小写不匹配，实际定义的select变量为dropList，未定义的DropList会导致逻辑中断
• 所有创建的弹窗DOM元素未插入到页面DOM树中，导致document.querySelector('#DropListSelect')查询返回null，触发报错
• 用法错误：dropListOption是单个option DOM元素，不是select的options集合，无法设置length属性，也不能用下标批量赋值
• 冗余查询：已经持有dropList的直接引用，不需要再用querySelector二次查找
• 命名冲突：prompt是浏览器内置全局函数，重名易引发异常

修正后可运行代码 #

var button = document.createElement('button');
button.textContent = '打开弹窗';
button.onclick = openPopup;
// 将按钮插入页面，否则无法触发点击操作
document.body.appendChild(button);

function openPopup() {
    var blockingDiv = document.createElement('div');
    blockingDiv.id = 'PopupBackground';
    // 基础遮罩样式，可根据需求自行调整
    blockingDiv.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:99999';
    
    var divPopup = document.createElement('div');
    divPopup.id = 'DivPopup';
    divPopup.style.cssText = 'background:#fff;padding:20px;border-radius:8px;min-width:300px;';
    
    var logo = document.createElement('div');
    logo.id = 'Logo';
    logo.textContent = '选择选项';
    logo.style.marginBottom = '15px';
    
    var content = document.createElement('div');
    content.id = 'Content';
    
    var dropList = document.createElement('select');
    dropList.id = 'DropListSelect';
    dropList.name = 'DropListSelect';
    dropList.style.width = '100%';
    // 修正变量名拼写错误
    content.appendChild(dropList);
    
    var options = [
        {
            'text': 'Select',
            'value': '',
            'defaultSelected': true,
            'selected': true
        },
        {
            'text': 'Text 1',
            'value': 'A',
            'defaultSelected': false,
            'selected': false
        },
        {
            'text': 'Text 2',
            'value': 'B',
            'defaultSelected': false,
            'selected': false
        },
        {
            'text': 'Text 3',
            'value': 'C',
            'defaultSelected': false,
            'selected': false
        }
    ];

    // 直接操作select元素的options集合
    dropList.options.length = 0;
    for (var i = 0; i < options.length; i++) {
        var type = options[i];
        dropList.options.add(new Option(type.text, type.value, type.defaultSelected, type.selected));
    }

    // 拼接完整DOM结构并插入页面
    divPopup.appendChild(logo);
    divPopup.appendChild(content);
    blockingDiv.appendChild(divPopup);
    document.body.appendChild(blockingDiv);

    // 可选功能：点击遮罩关闭弹窗
    blockingDiv.onclick = function(e) {
        if(e.target === blockingDiv) document.body.removeChild(blockingDiv);
    }
}

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