JavaScript 根据使用数组从另一个下拉列表中的选择动态创建选项

Posted 2023-02-18

【中文标题】JavaScript 根据使用数组从另一个下拉列表中的选择动态创建选项

【英文标题】：JavaScript Dynamically create options based on selection from another drop down using an array

【发布时间】：2021-11-09 18:18:03

【问题描述】：

我正在开发一个将按钮添加到网页的用户脚本。单击时我正在处理的按钮之一将创建一个弹出 div。我正在尝试在弹出窗口中创建一个动态选择/选项下拉列表，其中的选项来自一个数组。对于第二个下拉列表，我正在尝试根据上一个下拉列表中的选择创建一个动态下拉列表，但我不确定如何继续。我希望根据typeDropList 中所选选项的值动态创建itemDropList 的选项。

提前致谢！

这是我目前的代码：

var button = document.createElement('button'),
button.onclick = prompt;
function prompt() 
    var blockingDiv = document.createElement('div');
    blockingDiv.id = 'PopupBackground';
    var divPopup = document.createElement('div');
    divPopup.id = 'better1ClickSimTChangeCTIPopup';
    var content = document.createElement('div');
    content.id = 'Content';
    var typeDropList = document.createElement('select');
    typeDropList.id = 'TypeDropList';
    typeDropList.name = 'TypeDropList';
    typeDropList.onchange = changeItem(this.value);
    content.appendChild(typeDropList);
    var typeOptions =
        [
            
                "text": 'Select Type',
                "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
            
        ];
    for (var i = 0; i < typeOptions.length; i++) 
        var typeOption = document.createElement('option');
        typeOption.id = 'TypeOptions';
        typeOption.name = 'TypeOptions';
        var type = typeOptions[i];
        typeOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
        typeDropList.appendChild(typeOption);
    
    var itemDropList = document.createElement('select');
    itemDropList.id = 'ItemDropList';
    content.appendChild(itemDropList);
    var typeItemOptions =
    
        A: ['Item A 1',
            'Item A 2',
            'Item A 3'],
        B: ['Item B 1',
            'Item B 2',
            'Item B 3'],
        C: ['Item C 1',
            'Item C 2',
            'Item C 3']
    ;

【参考方案1】：

如上所述，您的目标存在几个问题，但既然您询问如何进行，我提供这些建议。

将所有内容保存在单个 DOM 中，即具有单个上下文的单个网页。您可能已经这样做了，但如果不是，您的弹出窗口肯定会导致您在保持所有内容并发方面出现问题。

创建您的第一个下拉菜单（选择和选项），并让它以您满意的方式工作，将“结果”放入全局内存中。 IE。使用 var 定义结果变量。

使用控制台确保您有正确的值来构建您的第二个下拉控件。

测试，测试，测试！使用内置的 javascript 工具一步一步进行，祝你好运！

从您的代码看来，您正试图在单个 Javascript 函数中完成所有操作。您需要将其分解为几个模块。它肯定需要至少两个功能。记住要使用好的设计技术，模块化代码就是答案！