This tutorial will show you how to create dependent or cascaded dynamic dropdown using jQuery. Sometimes we need to create such a cascaded dropdown where we need to select some value in the second dropdown based on first dropdown value. For example, we need to select city dropdown value based on country dropdown value and for this we cannot pre-populate the city dropdown value unless we know the country from country dropdown.

I will explain here with an example using jQuery. The example here contains two dropdown – one is parent dropdown that contains Continents & Oceans and another is sub-dropdown that contains continets names & oceans names and will be displayed based on selected parent dropdown value.
Output

When home page opens

dependent dropdown jQuery

When parent select box is selected

dependent dropdown jQuery

The full HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">  
    $(document).ready(function() {
        //create arrays to store option and values
        var continents = [
            {display: "Asia", value: "asia" },    
            {display: "Africa", value: "africa" },
            {display: "Antarctica", value: "antarctica" },
            {display: "Australia", value: "australia" },
            {display: "Europe", value: "europe" },
            {display: "North America", value: "north-america" },
            {display: "South America", value: "south-america" }
        ];
           
        var oceans = [
            {display: "Pacific", value: "pacific" },
            {display: "Atlantic", value: "atlantic" },
            {display: "Indian", value: "indian" },
            {display: "Southern", value: "southern" },
            {display: "Arctic", value: "arctic" }
        ];

        //If parent option is changed
        $("#parent_selection").change(function() {
            var parent = $(this).val(); //get option value from parent       
            switch(parent){ //using switch compare selected option and populate child
                case 'continents':
                    $('#child_selection').attr('disabled', false);
                    list(continents);
                    break;
                case 'oceans':
                    $('#child_selection').attr('disabled', false);
                    list(oceans);
                    break;
                default: //default child option is blank
                    $("#child_selection").html('');
                    $('#child_selection').attr("disabled", true);
                    break;
            }
        });

        //function to populate child select box
        function list(array_list) {
            $("#child_selection").html(""); //reset child options
            $(array_list).each(function (i) { //populate child options
                $("#child_selection").append("<option value=""+array_list[i].value+"">"+array_list[i].display+"</option>");
            });
        }
    });
    </script>
</head>
<body>
    <div class="wrapper">
        Select :
        <select name="parent_selection" id="parent_selection">
            <option value="">-- Please Select --</option>
            <option value="continents">Continents</option>
            <option value="oceans">Oceans</option>
        </select>
        <select name="child_selection" id="child_selection" disabled="disabled"/>
    </div>
</body>
</html>

Read also Dependent dropdown example in PHP, MySQL

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *