原生javascript製做省市區三級聯動詳細教程

多級聯動下拉菜單是前端常見的效果，省市區三級聯動又屬於其中最典型的案例。多級聯動通常都是與數據相關聯的，根據數據來生成和修改聯動的下拉菜單。完成一個多級聯動效果，有助於加強對數據處理的能力。

本實例以省市區三級聯動爲例，來講明具體是如何使用javascript來關聯數據，實現聯動下拉菜單。學習本教程以前，讀者須要具有html和css技能，同時須要有簡單的javascript基礎。

這裏先準備三個select元素，以下所示：

<div class="select_wrap">
  <span>省：</span>
  <select id="province">
    <option value="">請選擇</option>
  </select>
  <span>市：</span>
  <select id="city">
    <option value="">請選擇</option>
  </select>
  <span>區/縣：</span>
  <select id="county">
    <option value="">請選擇</option>
  </select>
</div>

 

再準備一些城市相關數據，本實例只列舉了少許數量。以下所示：

var data = {
  "北京市": {
    "市轄區": ["東城區", "西城區", "朝陽區", "豐臺區", "石景山區", "海淀區", "門頭溝區", "房山區", "通州區", "順義區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲區", "延慶區"]
  },
  "河北省": {
    "石家莊市": ["長安區", "橋西區", "新華區", "井陘礦區", "裕華區", "藁城區", "鹿泉區", "欒城區", "井陘縣", "正定縣", "行唐縣", "靈壽縣", "高邑縣", "深澤縣", "贊皇縣", "無極縣", "平山縣", "元氏縣", "趙縣", "石家莊高新技術產業開發區", "石家莊循環化工園區", "辛集市", "晉州市", "新樂市"],
    "唐山市": ["路南區", "路北區", "古冶區", "開平區", "豐南區", "豐潤區", "曹妃甸區", "灤縣", "灤南縣", "樂亭縣", "遷西縣", "玉田縣", "唐山市蘆臺經濟技術開發區", "唐山市漢沽管理區", "唐山高新技術產業開發區", "河北唐山海港經濟開發區", "遵化市", "遷安市"],
    "秦皇島市": ["海港區", "山海關區", "北戴河區", "撫寧區", "青龍滿族自治縣", "昌黎縣", "盧龍縣", "秦皇島市經濟技術開發區", "北戴河新區"],
    "邯鄲市": ["邯山區", "叢臺區", "復興區", "峯峯礦區", "肥鄉區", "永年區", "臨漳縣", "成安縣", "大名縣", "涉縣", "磁縣", "邱縣", "雞澤縣", "廣平縣", "館陶縣", "魏縣", "曲周縣", "邯鄲經濟技術開發區", "邯鄲冀南新區", "武安市"],
    "衡水市": ["桃城區", "冀州區", "棗強縣", "武邑縣", "武強縣", "饒陽縣", "安平縣", "故城縣", "景縣", "阜城縣", "河北衡水經濟開發區", "衡水濱湖新區", "深州市"]
  },
  "湖南省": {
    "長沙市": ["芙蓉區", "天心區", "嶽麓區", "開福區", "雨花區", "望城區", "長沙縣", "瀏陽市", "寧鄉市"],
    "株洲市": ["荷塘區", "蘆淞區", "石峯區", "天元區", "株洲縣", "攸縣", "茶陵縣", "炎陵縣", "雲龍示範區", "醴陵市"],
    "湘潭市": ["雨湖區", "嶽塘區", "湘潭縣", "湖南湘潭高新技術產業園區", "湘潭昭山示範區", "湘潭九華示範區", "湘鄉市", "韶山市"],
    "衡陽市": ["珠暉區", "雁峯區", "石鼓區", "蒸湘區", "南嶽區", "衡陽縣", "衡南縣", "衡山縣", "衡東縣", "祁東縣", "衡陽綜合保稅區", "湖南衡陽高新技術產業園區", "湖南衡陽松木經濟開發區", "耒陽市", "常寧市"],
  },
  "廣東省": {
    "廣州市": ["荔灣區", "越秀區", "海珠區", "天河區", "白雲區", "黃埔區", "番禺區", "花都區", "南沙區", "從化區", "增城區"],
    "韶關市": ["武江區", "湞江區", "曲江區", "始興縣", "仁化縣", "翁源縣", "乳源瑤族自治縣", "新豐縣", "樂昌市", "南雄市"],
    "深圳市": ["羅湖區", "福田區", "南山區", "寶安區", "龍崗區", "鹽田區", "龍華區", "坪山區"],
    "珠海市": ["香洲區", "斗門區", "金灣區"],
  }
};  

PS:實際工做的數據通常由數據庫提供。若有須要也能夠到網上搜索，不少大神都蒐集有完整的城市數據。

準備好這些，咱們按照慣例來分析功能，再一步一步完成。

1 分別獲取省市縣三個下拉框，以下所示：

var eProvince = document.getElementById('province');
var eCity = document.getElementById('city');
var eCounty = document.getElementById('county');

獲取到這三個下拉框後，才能夠經過操做數據來修改下拉框的選項。

 

2 遍歷數據；
頁面加載後，eProvince下拉框默認就應該是有數據的，因此須要遍歷數據，並取出其中的省份相關數據，生成option元素放到eProvince下拉框中，以下所示：

for(let k in data){
  //建立option元素
  let eOption = document.createElement('option');
  //設置option元素的值爲數據中「省」的名稱
  eOption.value = k;
  eOption.innerHTML = k;
  //把option依次加入到eProvince下拉框中
  eProvince.appendChild(eOption);
}

這時候點擊省份下拉框，就能夠看到下拉數據，如圖所示：

 

 

3 省份下拉框綁定事件；
如今能夠選擇省份了，在下拉框中選擇某個省，市下拉框就應該列出該省所包含的城市。因此須要給省份下拉框綁定一個change事件，以下所示：

 

eProvince.addEventListener('change',event=>{
  //獲取當前選擇的省份值
  let value = eProvince.value;
  //修改省份後，城市和區/縣下拉框中原有的值都會修改，直接經過修改eCity和eCounty元素innerHTML來初始化值
  eCity.innerHTML = eCounty.innerHTML = '<option value="">請選擇</option>';
  //判斷是否選擇了省份
  if(value!=''){
    //在數據中遍歷省份對應的城市
    for(let k in data[value]){
      //建立option元素
      let eOption = document.createElement('option');
      //設置option元素的值爲數據中「城市」的名稱
      eOption.value = k;
      eOption.innerHTML = k;
      //把option依次加入到eCity下拉框中
      eCity.appendChild(eOption);
    }
  }
});

選擇省份以後，能夠看到城市下拉框中也有了該省所包含的城市數據，如圖所示：

 

4 城市下拉框綁定事件；
如今能夠選擇城市了，這時候選擇城市，區/縣下拉框就應該列出該市對應的區/縣數據，以下所示：

//城市改變時，把對應的數據放到區/縣下拉框中
eCity.addEventListener('change',event=>{
  //獲取已選擇的省份值
  let sProvince = eProvince.value;
  //獲取當前選擇的城市值
  let sCity = eCity.value;
  //找到對應城市數據
  let arr = data[sProvince][sCity];
  //初始化eCounty元素中原有的值
  eCounty.innerHTML = '<option value="">請選擇</option>';
  //判斷是否選擇的是城市名，而不是選擇「請選擇」
  if(sCity!=''){
    //遍歷城市中對應的區/縣數據
    for(let i=0;i<arr.length;i++){
      //建立option元素
      let eOption = document.createElement('option');
      //設置option元素的值爲數據中「區/縣」的名稱
      eOption.value = arr[i];
      eOption.innerHTML = arr[i];
      //把option依次加入到eCounty下拉框中
      eCounty.appendChild(eOption);
    }
  }
});

好了，到這裏就完成了一個簡單的省市區三級聯動。選擇城市後，區/縣下也有對應的下拉數據，如圖所示：