How to change a select’s options based on another dropdown using javascript?

Today, We want to share with you javascript dropdown onchange another dropdown.In this post we will show you populate one dropdown based on selection in another dropdown javascript, hear for use javascript to change a second select list based on the first select list option we will give you demo and example for implement.In this post, we will learn about JQuery Get Dropdownlist Selected Value Onchange Event with an example.

How to create dropdown menu onchange on another dropdown list?

simple Dropdown onchange load another dropdown
Example 1:

Colours
Shapes
Names

JavaScript Code

function configureDropDownLists(ddl1,ddl2) {
    var menubars = ['Black', 'White', 'Blue'];
    var teams = ['Square', 'Circle', 'Triangle'];
    var names = ['John', 'David', 'Sarah'];

    switch (ddl1.value) {
        case 'Colours':
            ddl2.options.length = 0;
            for (i = 0; i < menubars.length; i++) {
                createOption(ddl2, menubars[i], menubars[i]);
            }
            break;
        case 'Shapes':
            ddl2.options.length = 0; 
        for (i = 0; i < teams.length; i++) {
            createOption(ddl2, teams[i], teams[i]);
            }
            break;
        case 'Names':
            ddl2.options.length = 0;
            for (i = 0; i < names.length; i++) {
                createOption(ddl2, names[i], names[i]);
            }
            break;
            default:
                ddl2.options.length = 0;
            break;
    }

}

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }

I hope you get an idea about javascript dropdown onchange another dropdown from database.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.