How to dynamically add an array to a dropdown depending on another dropdown list's selection?

Question

I have the following code which populates a dropdown with a list of items contained in an array:

<form id="myGroupSelectForm">
    <select id="selectGroup">
        <option>Choose a Group</option>
    </select>
    <select id="selectStudent">
        <option>Choose a Student</option>
    </select>
</form>

<script type="text/javascript">
    var select = document.getElementById("selectGroup"); 
    var options = ["Group 1", "Group 2", "Group 3"]; 
    var i;

    for(i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
</script>

I have 3 more arrays, and each one contains lists of students. For example:

StudentList1 = ['student1', 'student2'...]
StudentList2 = ['student1', 'student2'...]
StudentList3 = ['student1', 'student2'...]

How would I dynamically populate my second dropdown list with one of these 3 arrays, depending on the selection made in the first dropdown list?

Is there a built in function that can check for the selection in the first dropdown? And if so, how can I capture the selection?

Thank you in advance.

You simply need to add an event listener to the first <select> element, which listens to the change or input event. When the event is fired, you will want to purge all <option> elements in the second dropdown and populate it with the values you want. — Terry
– Terry, Commented Jun 12, 2020 at 9:52
Thank you Terry! I am currently looking up how to do this, but are you able to provide a code snippet to help? Thank you. — sw123456
– sw123456, Commented Jun 12, 2020 at 10:00

M0nst3R · Accepted Answer · 2020-06-12 10:26:56Z

You can create a mapping that maps the groups to their student lists, then add a change event listener to the group select to append the correct student list. I've also extracted the appending code into its own function to avoid code repetition.

var groupSelect = document.getElementById('selectGroup');
var studentSelect = document.getElementById('selectStudent'); 
var groupOptions = ['Group 1', 'Group 2', 'Group 3']; 
var studentList1 = ['group1student1', 'group1student2', 'group1student3'];
var studentList2 = ['group2student1', 'group2student2', 'group2student3'];
var studentList3 = ['group3student1', 'group3student2', 'group3student3'];
// maps groups by name to their corresponding student list
var groupMapping = {
    'Group 1': studentList1,
    'Group 2': studentList2,
    'Group 3': studentList3,
};
// appends an array of options to a given select element
function appendOptions(selectElement, options) {
    options.forEach((option) => {
        const optionElement = document.createElement('option');
        optionElement.textContent = option;
        optionElement.value = option;
        selectElement.appendChild(optionElement);
    });
}

// append group options
appendOptions(groupSelect, groupOptions);
groupSelect.addEventListener('change', (event) => {
    // clear student select only keeping the placeholder
    studentSelect.options.length = 1;
    // append student options using the mapping
    appendOptions(studentSelect, groupMapping[event.target.value]);
});

<form id="myGroupSelectForm">
    <select id="selectGroup">
        <option disabled selected>Choose a Group</option>
    </select>
    <select id="selectStudent">
        <option disabled selected>Choose a Student</option>
    </select>
</form>

sw123456 · Accepted Answer · 2020-06-12 10:07:50Z

0

OK, Thanks to Terry and a little research I can see how to get started on this now.

        <script>

        var a = document.getElementById('selectGroup');
        a.addEventListener('change', function() {
            alert(this.value);
            }, false);

        </script>

Adding the above will listen to the selection in the first drop down list and capture the value chosen. In this example I have a simple alert as to what was chosen. I will now replace this with code to select an array based on the selection followed by code to populate the second list with the selected array.

I will edit this response with completed code when done to see if it helps others.

answered Jun 12, 2020 at 10:07

sw123456

3,4892 gold badges27 silver badges44 bronze badges

Collectives™ on Stack Overflow

How to dynamically add an array to a dropdown depending on another dropdown list's selection?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related