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

Question

I'm working on a UserScript that adds Buttons to a webpage. One of the buttons I'm working on when clicked will create a popup div. I'm trying to create a dynamic Select/Option dropdown list within the popup, with the options coming from a JSON Array. However, I keep getting errors and was looking for some help in getting this to work. Here's a modified version of my code that deals with the creation of the 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)
    }

When I click the button I get Uncaught TypeError: Cannot set properties of null (setting 'length') at HTMLButtonElement.prompt.

dropListOption is an "option". It has no "length" property. It seems you are trying to create a new option for each element in options array. You will need to create an option each time through the loop. — James

James James · Accepted Answer · 2021-09-14T12:55:16

Give this a try:

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

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

1 Answers