JavaScript Dynamically create options based on selection from another drop down using an 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 an Array. For the second drop down list I'm trying to create a dynamic drop down list based on the selection in the previous dropdown list, but I'm unsure how to proceed. I'd like the itemDropList's options to be dynamically created based upon the value of the selected option in the typeDropList.

Thanks in advance!

This is my code so far:

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']
    };

Wayne S Wayne S · Accepted Answer · 2021-09-14T18:15:27

There are several issues with your goal, as stated, but since you ask how to proceed I offer these suggestions.

Keep everything in a single DOM, i.e. a single web page with a single context. You may be doing this already but if not your pop up is sure to cause you problems with keeping everything concurrent.
Create your first dropdown (select and options) and get it working to your satisfaction putting the "results" in global memory. I.e. define the result variables using var.
Use the console to be sure you have the correct values to build your second dropdown control.
Test, Test, TEST! Use the built-in Javascript tools to proceed step by step and good luck!

From your code it appears you are trying to do everything in a single Javascript function. You need to break this up into several modules. It will surely require at least two functions. Remember to use good design techniques, modular code is the answer here!

JavaScript Dynamically create options based on selection from another drop down using an array

1 Answers