多級聯(lián)動下拉菜單是前端常見的效果，省市區(qū)三級聯(lián)動又屬于其中最典型的案例。多級聯(lián)動一般都是與數(shù)據(jù)相關(guān)聯(lián)的，根據(jù)數(shù)據(jù)來生成和修改聯(lián)動的下拉菜單。完成一個(gè)多級聯(lián)動效果，有助于增強(qiáng)對數(shù)據(jù)處理的能力。

本實(shí)例以省市區(qū)三級聯(lián)動為例，來說明具體是如何使用javascript來關(guān)聯(lián)數(shù)據(jù)，實(shí)現(xiàn)聯(lián)動下拉菜單。學(xué)習(xí)本教程之前，讀者需要具備html和css技能，同時(shí)需要有簡單的javascript基礎(chǔ)。

這里先準(zhǔn)備三個(gè)select元素，如下所示：

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

再準(zhǔn)備一些城市相關(guān)數(shù)據(jù)，本實(shí)例只列舉了少量數(shù)量。如下所示：

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

PS:實(shí)際工作的數(shù)據(jù)一般由數(shù)據(jù)庫提供。如有需要也可以到網(wǎng)上搜索，很多大神都搜集有完整的城市數(shù)據(jù)。

準(zhǔn)備好這些，我們按照慣例來分析功能，再一步一步完成。

1 分別獲取省市縣三個(gè)下拉框，如下所示：

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

獲取到這三個(gè)下拉框后，才可以通過操作數(shù)據(jù)來修改下拉框的選項(xiàng)。

2 遍歷數(shù)據(jù)；
頁面加載后，eProvince下拉框默認(rèn)就應(yīng)該是有數(shù)據(jù)的，所以需要遍歷數(shù)據(jù)，并取出其中的省份相關(guān)數(shù)據(jù)，生成option元素放到eProvince下拉框中，如下所示：

for(let k in data){
  //創(chuàng)建option元素
  let eOption = document.createElement('option');
  //設(shè)置option元素的值為數(shù)據(jù)中“省”的名稱
  eOption.value = k;
  eOption.innerHTML = k;
  //把option依次加入到eProvince下拉框中
  eProvince.appendChild(eOption);
}

這時(shí)候點(diǎn)擊省份下拉框，就可以看到下拉數(shù)據(jù)，如圖所示：

3 省份下拉框綁定事件；
現(xiàn)在可以選擇省份了，在下拉框中選擇某個(gè)省，市下拉框就應(yīng)該列出該省所包含的城市。所以需要給省份下拉框綁定一個(gè)change事件，如下所示：

eProvince.addEventListener('change',event=>{
  //獲取當(dāng)前選擇的省份值
  let value = eProvince.value;
  //修改省份后，城市和區(qū)/縣下拉框中原有的值都會修改，直接通過修改eCity和eCounty元素innerHTML來初始化值
  eCity.innerHTML = eCounty.innerHTML = '<option value="">請選擇</option>';
  //判斷是否選擇了省份
  if(value!=''){
    //在數(shù)據(jù)中遍歷省份對應(yīng)的城市
    for(let k in data[value]){
      //創(chuàng)建option元素
      let eOption = document.createElement('option');
      //設(shè)置option元素的值為數(shù)據(jù)中“城市”的名稱
      eOption.value = k;
      eOption.innerHTML = k;
      //把option依次加入到eCity下拉框中
      eCity.appendChild(eOption);
    }
  }
});

選擇省份之后，可以看到城市下拉框中也有了該省所包含的城市數(shù)據(jù)，如圖所示：

4 城市下拉框綁定事件；
現(xiàn)在可以選擇城市了，這時(shí)候選擇城市，區(qū)/縣下拉框就應(yīng)該列出該市對應(yīng)的區(qū)/縣數(shù)據(jù)，如下所示：

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

好了，到這里就完成了一個(gè)簡單的省市區(qū)三級聯(lián)動。選擇城市后，區(qū)/縣下也有對應(yīng)的下拉數(shù)據(jù)，如圖所示：

總結(jié)

以上是生活随笔為你收集整理的原生javascript制作省市区三级联动详细教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。