多級聯動下拉選單是前端常見的效果，省市區三級聯動又屬於其中最典型的案例。多級聯動一般都是與資料相關聯的，根據資料來生成和修改聯動的下拉選單。完成一個多級聯動效果，有助於增強對資料處理的能力。
本例項以省市區三級聯動為例，來說明具體是如何使用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); } } });
好了，到這裡就完成了一個簡單的省市區三級聯動。選擇城市後，區/縣下也有對應的下拉資料，如圖所示：
