country state city drop down list javascript source code

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

  
        -- Select Country --
    
     

    

  
    
        -- Select State--
    
    

    
    
    
        -- Select City--
    
    

    

    
        -- Select Zip--
    

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

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.