JavaScript 基于数组实现两个select下拉框级联动态生成选项的问题

实现逻辑说明 #

你需要完成下拉联动只需要修正事件绑定规则、补充选项更新函数即可，核心调整点如下：

• 修正第一个下拉框的onchange事件绑定：不要直接执行回调函数，而是绑定函数引用，触发时读取当前选中值
• 编写changeItem函数：每次触发时先清空第二个下拉框的所有旧选项，再根据选中的类型值从typeItemOptions中取出对应选项数组，循环生成新的Option插入第二个下拉框
• 补充默认提示逻辑：当第一个下拉框选中默认空值时，第二个下拉框显示「请先选择类型」的提示选项

修正后完整可运行代码 #

var button = document.createElement('button');
button.innerText = '打开弹窗';
button.onclick = showPopup;
// 避免和浏览器自带prompt系统弹窗函数重名，修改函数名
function showPopup() {
    var blockingDiv = document.createElement('div');
    blockingDiv.id = 'PopupBackground';
    // 可自行添加遮罩样式，此处省略样式定义
    blockingDiv.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;';
    var divPopup = document.createElement('div');
    divPopup.id = 'better1ClickSimTChangeCTIPopup';
    divPopup.style.cssText = 'background:#fff;padding:20px;border-radius:4px;';
    var content = document.createElement('div');
    content.id = 'Content';
    
    var typeDropList = document.createElement('select');
    typeDropList.id = 'TypeDropList';
    typeDropList.name = 'TypeDropList';
    // 修正事件绑定：绑定函数引用而非直接执行函数
    typeDropList.onchange = function() {
        changeItem(this.value);
    };
    content.appendChild(typeDropList);

    var typeOptions = [
        {
            "text": '选择类型',
            "value": '',
            "defaultSelected": true,
            "selected": true
        },
        {
            "text": '文本1',
            "value": 'A',
            "defaultSelected": false,
            "selected": false
        },
        {
            "text": '文本2',
            "value": 'B',
            "defaultSelected": false,
            "selected": false
        },
        {
            "text": '文本3',
            "value": 'C',
            "defaultSelected": false,
            "selected": false
        }
    ];
    // 简化option创建逻辑，直接调用select的add方法插入
    for (var i = 0; i < typeOptions.length; i++) {
        var type = typeOptions[i];
        typeDropList.add(new Option(type.text, type.value, type.defaultSelected, type.selected));
    }

    var itemDropList = document.createElement('select');
    itemDropList.id = 'ItemDropList';
    itemDropList.style.marginLeft = '10px';
    content.appendChild(itemDropList);

    var typeItemOptions = {
        A: ['选项A1', '选项A2', '选项A3'],
        B: ['选项B1', '选项B2', '选项B3'],
        C: ['选项C1', '选项C2', '选项C3']
    };

    // 联动更新第二个下拉框的函数
    function changeItem(selectedType) {
        // 清空原有所有选项
        itemDropList.options.length = 0;
        // 处理未选择类型的默认情况
        if (!selectedType) {
            itemDropList.add(new Option('请先选择类型', ''));
            return;
        }
        // 读取对应选项数组生成新选项
        var itemList = typeItemOptions[selectedType] || [];
        itemList.forEach(function(itemText) {
            itemDropList.add(new Option(itemText, itemText));
        });
    }

    // 初始化第二个下拉框的默认提示
    changeItem('');

    // 补充节点插入逻辑，原代码缺少这部分弹窗无法显示
    divPopup.appendChild(content);
    blockingDiv.appendChild(divPopup);
    document.body.appendChild(blockingDiv);
}
// 把按钮插入页面
document.body.appendChild(button);

调整说明 #

• 优化了option创建的冗余写法，不需要额外创建option节点再嵌套，直接调用select的add方法即可
• 补充了基础样式和节点插入逻辑，可直接运行测试效果
• 新增了遮罩层关闭逻辑如果需要可以自行添加，比如点击遮罩层移除弹窗节点

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