JavaScript 创建新的下拉列表，添加选项以从数组中选择

Question

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

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

现在将我的代码更改为以下工作。感谢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);
    }

Answer 2

试试这个：

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));
}