Danh sách thả xuống Quốc gia, Tỉnh, Thành phố trong JavaScript

mã nguồn danh sách thả xuống quốc gia tỉnh thành phố javascript

Danh sách thả xuống phụ thuộc HTML. Mã nguồn JavaScript này là để hiển thị danh sách thả xuống phụ thuộc quốc gia tỉnh thành phố cho người dùng.

Mã HTML

<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>

Mã JavaScript

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]);
}
}
}

Hy vọng bạn đã có ý tưởng về mã nguồn danh sách thả xuống quốc gia tỉnh thành phố javascript.

• Bài đăng trên blog này ban đầu được xuất bản tại: https://www.pakainfo.com