country state city drop down list javascript source code

0
()

country state city drop down list javascript source code – Cascading dropdown list of Country/State/City/Zip – Show district list as per country and state select in dropdown select box Javascript Example With demo.

country state city drop down list javascript source code

Dependent Dropdown HTML. This JavaScript Source code is to display the country state city dependent dropdowns to the user.

HTML Code

<form name="myform" id="myForm">
  <select id="chooseCountryData" size="1">
        <option value="" selected="selected">-- Select Country --</option>
    </select>
     <br>
    <br>
  
    <select id="chooseStateData" size="1">
        <option value="" selected="selected">-- Select State--</option>
    </select>
    <br>
    <br>    
    <select id="chooseCityData" size="1">
        <option value="" selected="selected">-- Select City--</option>
    </select>
    <br>
    <br>
    <select id="chooseZipData" size="1">
        <option value="" selected="selected">-- Select Zip--</option>
    </select>
</form>

JavaScript Code

var countryStateInfo = {
	"USA": {
		"California": {
			"Los Angeles": ["90001", "90002", "90003", "90004"],
			"San Diego": ["92093", "92101"]
		},
		"Texas": {
			"Dallas": ["75201", "75202"],
			"Austin": ["73301", "73344"]
		}
	},
	"India": {
		"Assam": {
			"Dispur": ["781005"],
			"Guwahati" : ["781030", "781030"]
		},
		"Gujarat": {
			"Vadodara" : ["390011", "390020"],
			"Surat" : ["395006", "395002"]
		}
	}
}


window.onload = function () {
	
	var chooseCountryData = document.getElementById("chooseCountryData");
	var chooseStateData = document.getElementById("chooseStateData");	
	var chooseCityData = document.getElementById("chooseCityData");
	var chooseZipData = document.getElementById("chooseZipData");
	
	for (var country in countryStateInfo) {
		chooseCountryData.options[chooseCountryData.options.length] = new Option(country, country);
	}
	
	chooseCountryData.onchange = function () {
		 
		 chooseStateData.length = 1; 
		 chooseCityData.length = 1; 
		 chooseZipData.length = 1; 
		 
		 if (this.selectedIndex < 1)
			 return; 
		 
		 for (var state in countryStateInfo[this.value]) {
			 chooseStateData.options[chooseStateData.options.length] = new Option(state, state);
		 }
	}
	
	chooseStateData.onchange = function () {		 
		 
		 chooseCityData.length = 1; 
		 chooseZipData.length = 1; 
		 
		 if (this.selectedIndex < 1)
			 return; 
		 
		 for (var city in countryStateInfo[chooseCountryData.value][this.value]) {
			 chooseCityData.options[chooseCityData.options.length] = new Option(city, city);
		 }
	}
	

	chooseCityData.onchange = function () {
		chooseZipData.length = 1; 
		
		if (this.selectedIndex < 1)
			return;
		
		var zips = countryStateInfo[chooseCountryData.value][chooseStateData.value][this.value];
		for (var i = 0; i < zips.length; i++) {
			chooseZipData.options[chooseZipData.options.length] = new Option(zips[i], zips[i]);
		}
	}	
}

Don’t Miss : Country State City Drop Down List Using JavaScript

Download

I hope you get an idea about country state city drop down list javascript source code.
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:  get value of radio button jquery

How useful was this post?

Free Live Chat for Any Issue

Click on a star to rate it!