HTML:
<select id="address" name="prov" class="prov" onchange="showCity1(this)">
<option>=请选择省份=</option>
</select>
<select id="address1" name="prov" class="prov" onchange="showCity1(this)">
<option>=请选择省份=</option>
</select>
JS:
$(function () {
var current_prov;
var current_city;
var current_country;
/* 自动加载省份列表 */
showPro1();
});
function showPro1() {
var len = province.length;
$(".prov").attr("onchange", "showCity1(this)");
for(var i = 0; i < len; i++) {
var provOpt = document.createElement('option');
provOpt.innerText = province[i]['name'];
provOpt.value = i;
if($("#address").find('option').length < 35)
$("#address").append(provOpt);
}
for(var i = 0; i < len; i++) {
var provOpt = document.createElement('option');
provOpt.innerText = province[i]['name'];
provOpt.value = i;
if($("#address1").find('option').length < 35)
$("#address1").append(provOpt);
}
}
function showCity1(obj) {
var val = obj.options[obj.selectedIndex].value;
current_prov = val;
$(obj).find('option').remove();
if(province[val]['city'].length == 1) {
showCountry1(obj,'flag');
} else {
$(obj).attr("onchange", "showCountry1(this)");
var cityLen = province[val]['city'].length;
for(var j = 0; j < cityLen; j++) {
if (j == 0)
$(obj).append('<option>' + province[val].name + '</option>');
var cityOpt = document.createElement('option');
cityOpt.innerText = '---' + province[val]['city'][j].name;
cityOpt.value = j;
$(obj).append(cityOpt);
}
}
}
function showCountry1(obj, data) {
if (data == 'flag') {
var val = 0;
} else {
var val = obj.options[obj.selectedIndex].value;
}
$(obj).find('option').remove();
current_city = val;
$(obj).attr("onchange", "selectCountry(this)");
var countryLen = province[current_prov]['city'][val].districtAndCounty.length;
for (var z = 0; z < countryLen; z++) {
if (z == 0 && province[current_prov]['city'].length != 1) {
$(obj).append('<option>' + province[current_prov].name + province[current_prov]['city'][val].name + '</option>');
} else if (z == 0 && province[current_prov]['city'].length == 1){
$(obj).append('<option>' + province[current_prov].name + '</option>');
}
var countryOpt = document.createElement('option');
countryOpt.innerText = '--- --- ---' + province[current_prov]['city'][val].districtAndCounty[z];
countryOpt.value= z;
$(obj).append(countryOpt);
}
}
function selectCountry(obj) {
var val = obj.options[obj.selectedIndex].value;
$(obj).find('option').remove();
if (province[current_prov]['city'].length == 1) {
$(obj).append('<option>' + province[current_prov].name +
province[current_prov]['city'][current_city]['districtAndCounty'][val] + '</option>');
} else {
$(obj).append('<option>' + province[current_prov].name +
province[current_prov]['city'][current_city].name +
province[current_prov]['city'][current_city]['districtAndCounty'][val] + '</option>');
}
showPro1();
}
外部js文件见上篇三个select省市区联动