JavaScript Dependent Dropdown List download

Introduction

HTML Dropdown Lists play an essential role in your web form when we need to collect user’s information. Dropdown Lists takes a very small space on your web page, whereas permitting to specify the massive quantity of data from which person might select an option.

In this tutorial, we will learn how to create a Dependent Dropdown List (Cascading Dropdown List) using HTML, JavaScript and Jquery.

The dynamic dependent dropdown list (Cascading Dropdown List) field can be created using JavaScript. In many of the Registrations forms, you want to implement dropdown list boxes. In this tutorial, the first dropdown list contains the countries and the second dropdown list contains the states. When you select the country from the countries dropdown list, depending upon the country dropdown list selected the second dropdown list gets populated with all the states.

1. HTML Code

Creating two Dropdown List, Countries and States

• The First Dropdown list contains the list of countries and
• Another dropdown shows the States name which is filled with jQuery based on the country selection from the first dropdown list.

The HTML code looks like this.

<div class="container">
    <div class="title">
        <h1>Dependent Dropdown List in HTML using JavaScript, Cascading Dropdown List</h1>
    </div>
    <form id="Form" name="form" method="post">
        <div class="form">
            <label>Select Country</label>
            <select name="country" id="country">
                <option value="">Select Country</option>
                <option value="India">India</option>
                <option value="USA">United State of America</option>
                <option value="Canada">Canada</option>
                <option value="France">France</option>
            </select>
        </div>
        <div class="form">
            <label>Select State</label>
            <select disabled="disabled" class="state" id="state" name="state">
                <option value>Select State</option>
                <!-- Home Ware -->
                <optgroup data-rel="India">
                    <option value="New-Delhi">New Delhi</option>
                    <option value="Hyderabad">Hyderabad</option>
                    <option value="Kolkata">Kolkata</option>
                    <option value="Mumbai">Mumbai</option>
                </optgroup>
                <!-- Education -->
                <optgroup data-rel="USA">
                    <option value="Alabama">Alabama</option>
                    <option value="Arizona">Arizona</option>
                    <option value="Arkansas">Arkansas</option>
                    <option value="Kansas">Kansas</option>
                    <option value="Virginia">Virginia</option>
                </optgroup>
                <optgroup data-rel="Canada">
                    <option value="Alberta">Alberta</option>
                    <option value="British-Columbia">British Columbia</option>
                    <option value="Manitoba">Manitoba</option>
                    <option value="Nova-Scotia">Nova Scotia</option>
                </optgroup>
                <optgroup data-rel="France">
                    <option value="Auvergne">Auvergne</option>
                    <option value="Bretagne">Bretagne</option>
                    <option value="Corse">Corse</option>
                    <option value="Hauts-de-France">Hauts de France</option>
                </optgroup>
            </select>
        </div>
    </form>
</div>

2. Javascript Code

The below Javascript code will load the data on the second dropdown list on the selection of first dropdown option.

<script type="text/javascript">
    //<![CDATA[
    $(function () {
        var $cat = $("#country"),
            $state = $(".state");
        var optgroups = {};
        $state.each(function (i, v) {
            var $e = $(v);
            var _id = $e.attr("id");
            optgroups[_id] = {};
            $e.find("optgroup").each(function () {
                var _r = $(this).data("rel");
                $(this).find("option").addClass("is-dyn");
                optgroups[_id][_r] = $(this).html();
            });
        });
        $state.find("optgroup").remove();

        var _lastRel;
        $cat.on("change", function () {
            var _rel = $(this).val();
            if (_lastRel === _rel) return true;
            _lastRel = _rel;
            $state.find("option").attr("style", "");
            $state.val("");
            $state.find(".is-dyn").remove();
            if (!_rel) return $state.prop("disabled", true);
            $state.each(function () {
                var $el = $(this);
                var _id = $el.attr("id");
                $el.append(optgroups[_id][_rel]);
            });
            $state.prop("disabled", false);
        });
    });
    //]]>
</script>

3. CSS Code

Include the style.css for form design.

.container {
	width: 50%;
	margin: 0 auto;
	background: #f3f2f2;
	text-align: center;
	padding: 20px;
}
.title {
	margin-bottom: 60px;
}
.title h1 {
	font-size: 28px;
	font-weight: bold;
}
.form {
	margin-bottom: 20px;
}
.form select {
	width: 50%;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 1px 0px 0px 10px;
}
.form label {
	padding-right: 20px;
	font-size: 16px;
	font-weight: bold;
}
.state {
	margin-left: 25px;
}

Add the below jquery library in the HTML head section. You can download jquery library from the official website

<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.11.0.js">
</script>

Conclusion

In Dependent Dropdown List (Cascading Dropdown List) tutorial, I am using two dropdown lists one is for the country and another one is for the state of the selection of country name from the country dropdown. You can easily implement this code in PHP, JSP etc.

Full source code for JavaScript Dependent Dropdown List