三级联动小demo

您选择的是： <input type="text" value="" id="addr-show">

  <!-- 省份选择 -->
  <select id="prov" name="prov" onchange="showCity(this)">
   <option>=请选择省份=</option>
  </select>
  <!-- 城市选择 -->
  <select id="city" onchange="showCountry(this)">
   <option>=请选择城市=</option>
  </select>
  <!-- 区县选择 -->
  <select id="country" onchange="selectCountry(this)">
   <option>=请选择县区=</option>
  </select>
  
  <button type="button" class="btn" onClick="showAddr()">确定</button>

$(function () {
  var current_prov;
  var current_city;
  var current_country;
     /* 自动加载省份列表 */
     showPro();
 });
  function showPro(){
  $(".btn").disabled = true;
  var len = province.length; 
  for(var i = 0; i < len; i++) {
   var provOpt = document.createElement("option");
   provOpt.innerText = province[i]['name'];
   provOpt.value = i;
      prov.appendChild(provOpt);
  }
  };
  /*根据所选的省份来显示城市列表*/
  function showCity(obj) {
    var val = obj.options[obj.selectedIndex].value;
    current_prov = val;
    if (val >=0) {
      city.style.display = 'inline-block';
      country.style.display = 'none';
    } else {
      city.style.display = 'none';
      country.style.display = 'none';
    }
 if (val != null) {
      city.length = 1;
      if (province[val]) {
        var cityLen = province[val]["city"].length;
      }
      for (var j = 0; j < cityLen; j++) {
        var cityOpt = document.createElement('option');
        cityOpt.innerText = province[val]["city"][j].name;
        cityOpt.value = j;
        city.appendChild(cityOpt);
      }
    }
  };
  /*根据所选的城市来显示县区列表*/
  function showCountry(obj) {
    var val = obj.options[obj.selectedIndex].value;
    if (val >=0) {
      country.style.display = 'inline-block';
    } else {
      country.style.display = 'none';
    }
    current_city = val;
    if (val != null) {
      country.length = 1; 
      if (province[current_prov]["city"][val]) {
        var countryLen = province[current_prov]["city"][val].districtAndCounty.length;
      }
      if(countryLen == 0){
        addrShow.value = province[current_prov].name + '-' + province[current_prov]["city"][val].name;
        return;
      }
      for (var n = 0; n < countryLen; n++) {
        var countryOpt = document.createElement('option');
        countryOpt.innerText = province[current_prov]["city"][val].districtAndCounty[n];
        countryOpt.value = n;
        country.appendChild(countryOpt);
      }
    }
  };
  
  function selectCountry(obj) {
   current_country = obj.options[obj.selectedIndex].value;
   $(".btn").disabled = false;
  
  };
  function showAddr() {
    var ss = province[current_prov].name + "|" + 
     		 province[current_prov]['city'][current_city].name + "|" + 
      		  province[current_prov]['city'][current_city]['districtAndCounty'][current_country];
   $("#addr-show").val(ss);
  }

var province = [
{
    name: "河北省",
    city: [
      {
        name: "石家庄市",
        districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
      },
      {
        name: "张家口市",
        districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
      },
      {
        name: "承德市",
        districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
      },
      {
        name: "秦皇岛市",
        districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
      },
      {
        name: "唐山市",
        districtAndCounty: ["路北区", "路南区", "古冶区", "开平区", "丰润区", "丰南区", "遵化市", "迁安市", "滦县", "滦州镇", "滦南县", "倴城镇", "乐亭县", "乐亭镇", "迁西县", "兴城镇", "玉田县", "玉田镇", "唐海县", "唐海镇"]
      },
      {
        name: "廊坊市",
        districtAndCounty: ["安次区", "广阳区", "霸州市", "三河市", "固安县", "固安镇", "永清县", "永清镇", "香河县", "淑阳镇", "大城县", "平舒镇", "文安县", "文安镇", "大厂回族自治县", "大厂镇"]
      },
      {
        name: "保定市",
        districtAndCounty: ["新市区", "北市区", "南市区", "定州市", "涿州市", "安国市", "高碑店市", "满城县", "满城镇", "清苑县", "清苑镇", "易县", "易州镇", "徐水县", "安肃镇", "涞源县", "涞源镇", "定兴县", "定兴镇", "顺平县", "蒲阳镇", "唐县", "仁厚镇", "望都县", "望都镇", "涞水县", "涞水镇", "高阳县", "高阳镇", "安新县", "安新镇", "雄县", "雄州镇", "容城县", "容城镇", "曲阳县", "恒州镇", "阜平县", "阜平镇", "博野县", "博陵镇", "蠡县", "蠡吾镇"]
      },
      {
        name: "衡水市",
        districtAndCounty: ["桃城区", "冀州市", "深州市", "枣强县", "枣强镇", "武邑县", "武邑镇", "武强县", "武强镇", "饶阳县", "饶阳镇", "安平县", "安平镇", "故城县", "郑口镇", "景县", "景州镇", "阜城县", "阜城镇"]
      },
      {
        name: "沧州市",
        districtAndCounty: ["运河区", "新华区", "泊头市", "任丘市", "黄骅市", "河间市", "沧县", "沧州市新华区", "青县", "清州镇", "东光县", "东光镇", "海兴县", "苏基镇", "盐山县", "盐山镇", "肃宁县", "肃宁镇", "南皮县", "南皮镇", "吴桥县", "桑园镇", "献县", "乐寿镇", "孟村回族自治县", "孟村镇"]
      },
      {
        name: "邢台市",
        districtAndCounty: ["桥东区", "桥西区", "南宫市", "沙河市", "邢台县", "邢台市桥东区", "临城县", "临城镇", "内丘县", "内丘镇", "柏乡县", "柏乡镇", "隆尧县", "隆尧镇", "任县", "任城镇", "南和县", "和阳镇", "宁晋县", "凤凰镇", "巨鹿县", "巨鹿镇", "新河县", "新河镇", "广宗县", "广宗镇", "平乡县", "丰州镇", "威县", "洺州镇", "清河县", "葛仙庄镇", "临西县", "临西镇"]
      },
      {
        name: "邯郸市",
        districtAndCounty: ["丛台区", "邯山区", "复兴区", "峰峰矿区", "武安市", "邯郸县", "南堡乡东小屯村", "临漳县", "临漳镇", "成安县", "成安镇", "大名县", "大名镇", "涉县", "涉城镇", "磁县", "磁州镇", "肥乡县", "肥乡镇", "永年县", "临洺关镇", "邱县", "新马头镇", "鸡泽县", "鸡泽镇", "广平县", "广平镇", "馆陶县", "馆陶镇", "魏县", "魏城镇", "曲周县", "曲周镇"]
      }
    ]
  }

]