js实现省市区三级联动(一个下拉框实现、页面可以多次引用)

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省市区联动