javascript dynamic drop down list country state city

Today, We want to share with you country state city dropdown javascript.In this post we will show you how to populate state dropdown based on option selected in country dropdown using jquery?, hear for Show district list as per country and state select in dropdown select box Javascript we will give you demo and example for implement.In this post, we will learn about populate Cascading A DropDownList with group options with an example.

Read Also:  Dependent country state city Cascading dropdown using Vuejs

Cascading Dependent Dropdown Country, State, City Using JavaScript

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var stateObject = {
"India": { "Rajkot": ["new Rajkot", "North Rajkot"],
"Kerala": ["Thiruvananthapuram", "Palakkad"],
"Pakistan": ["North Pakistan", "South Pakistan"],
},
"Australia": {
"South Australia": ["Dunstan", "Mitchell"],
"Victoria": ["Altona", "Euroa"]
}, "Canada": {
"Alberta": ["Acadia", "Bighorn"],
"Columbia": ["Washington", ""]
},
}
window.onload = function () {
var zoneSel = document.getElementById("zoneSel"),
stateSel = document.getElementById("stateSel"),
stateSel = document.getElementById("stateSel");
for (var country in stateObject) {
zoneSel.options[zoneSel.options.length] = new Option(country, country);
}
zoneSel.onchange = function () {
stateSel.length = 1; // delete all options bar user
stateSel.length = 1; // delete all options bar user
if (this.selectedIndex < 1) return; // done 
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
zoneSel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
stateSel.length = 1; // delete all options bar user
if (this.selectedIndex < 1) return; // done 
var state = stateObject[zoneSel.value][this.value];
for (var i = 0; i < state.length; i++) {
stateSel.options[stateSel.options.length] = new Option(state[i], state[i]);
}
}
}
</script>
</head>
<body>
<form name="myform" id="myForm">
Choose Country: <select name="state" id="zoneSel" size="1">
<option value="" selected="selected">Choose Country</option>
</select>
<br>
<br>
Choose State: <select name="countrya" id="stateSel" size="1">
<option value="" selected="selected">Please select Country user</option>
</select>
<br>
<br>
Choose District: <select name="state" id="stateSel" size="1">
<option value="" selected="selected">Please select State</option>
</select><br>
<input type="submit">
<closeform></closeform></form>
</body>
</html>

I hope you get an idea about state drop down list in html.
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.

Read Also:  Ad Rotate Text Animation Effects using jQuery

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

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