二級地址聯動

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>二級地址聯動</title>
      <style>
          select {
              width: 100px;
          }
      </style>
  </head>
  <body>
      <select  id="prov"></select>
      <select  id="city"></select>
  </body>

  <script>
  //省份列表
  var prov_list = ['江蘇','江西','安徽','臺灣','廣東'];

  //市列表
  var city_list = [];

  //將不同省份內的不同市的信息添加到city_list數組中，形成多維數組
  city_list[0] = ['南京', '蘇州', '無錫', '常州', '揚州', '徐州'];
  city_list[1] = ['南昌', '贛州', '九江', '婺源', '景德鎮', '鷹潭'];
  city_list[2] = ['合肥', '蕪湖', '馬鞍山', '安慶', '蚌埠', '宿州'];
  city_list[3] = ['臺北', '臺南', '臺中', '高雄', '基隆', '花蓮'];
  city_list[4] = ['廣州', '東莞', '深圳', '汕頭', '佛山', '潮州'];

  //獲取省份  和 市的 下拉
  var prov_select = document.getElementById('prov');
  var city_select = document.getElementById('city');



  //添加數據 
  for(var i=0;i<prov_list.length;i++){
      prov_select.add(new Option(prov_list[i],i));
      // prov_list.innerHTML = '<option></option>';
  }

  //給省份的選擇框添加change事件
  prov_select.onchange = function (){
      //console.log(Math.random());
      //將省與市相互管聯
      var index = this.value;

      city_select.length = 0;
      // city_list[0]
      var citys = city_list[index];

    //console.log(citys);
    //將拿到的市放置到第二個下拉
    for(var i=0;i<citys.length;i++){
          city_select.add(new Option(citys[i],i));
    }
  //console.log(index);
}

prov_select.onchange(); // 手動調用一下事件
//console.log(city_list);
</script>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容