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

本例項以省市區三級聯動為例，來說明具體是如何使用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);
    }
  }
});

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

&n