JavaScript 创建新的下拉列表，将选项添加到 Select 来自数组

Question

我正在研究将按钮添加到网页的 UserScript。单击我正在处理的按钮之一将创建一个弹出窗口 div。我正在尝试在弹出窗口中创建一个动态 Select/Option 下拉列表，其中的选项来自数组。但是，我不断收到错误，并且正在寻求一些帮助来使其正常工作。这是我的代码的修改版本，用于处理选项 & select.

的创建

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 = 'DivPopup';
    var logo = document.createElement('div');
    logo.id = 'Logo';
    var content = document.createElement('div');
    content.id = 'Content';
    var dropList = document.createElement('select');
    dropList.id = 'DropListSelect';
    dropList.name = 'DropListSelect';
    content.appendChild(DropList);
    var dropListOption = document.createElement('option');
    dropListOption.id = 'DropListOptions';
    dropListOption.name = 'DropListOptions';
    dropList.appendChild(dropListOption);
    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
        }
    ];
    var select = document.querySelector('#DropListSelect');
    dropListOption.length = 0;
    for (var i = 0; i <= options.length - 1; i++) {
        var type = options[i];
        dropListOption[i] = new Option(type.text, type.value, type.defaultSelected, type.selected)
    }

当我点击按钮时，我得到 Uncaught TypeError: Cannot set properties of null (setting 'length') at HTMLButtonElement.prompt。

Answer 1

试一试：

var select = document.querySelector('#DropListSelect');
select.innerHTML = ""; // delete all existing options
for (var i = 0; i < options.length; i++) {
    var type = options[i];
    select.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
}

Answer 2

现在将我的代码更改为以下内容即可。谢谢 James 让我走上正轨！

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 = 'DivPopup';
    var logo = document.createElement('div');
    logo.id = 'Logo';
    var content = document.createElement('div');
    content.id = 'Content';
    var dropList = document.createElement('select');
    dropList.id = 'DropListSelect';
    dropList.name = 'DropListSelect';
    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
        }
    ];
    for (var i = 0; i <= options.length - 1; i++) {
        var dropListOption = document.createElement('option');
        dropListOption.id = 'DropListOptions';
        dropListOption.name = 'DropListOptions';
        var type = options[i];
        dropListOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
        dropList.appendChild(dropListOption);
    }

JavaScript 创建新的下拉列表，将选项添加到 Select 来自数组

JavaScript Create New Drop Down List, add Options to Select from Array

javascript

arrays

html-select

drop-down-menu