快捷導(dǎo)航

JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)

更新時(shí)間：2020年04月10日 11:30:43 作者：外號(hào)班長(zhǎng)

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

純JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)，供大家參考，具體內(nèi)容如下

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>省市縣三級(jí)下拉聯(lián)動(dòng)-李康</title>
 <style>
 fieldset{
 width: 25%;
 border: 1px dashed black;
 }
 legend{
 margin-left: 135px;
 }
 </style>
</head>
<body>
 <form action="">
 <fieldset>
 <legend>地址信息</legend>
 請(qǐng)選擇居住地：<br><br>
 <select id="province" οnchange="chooseProvince(this)">
 <option value="1">--請(qǐng)選擇省--</option>
 </select>
 <select id="city" οnchange="chooseCity(this)">
  <option value="2">--請(qǐng)選擇市--</option>
 </select>
 <select id="area">
 <option value="3">--請(qǐng)選擇區(qū)--</option>
 </select>
 </fieldset>
 </form>
 
 <script>
 var provinceList = [{
 name: '北京',
 cityList: [
 { name: '市轄區(qū)', areaList: ['東城區(qū)', '西城區(qū)', '崇文區(qū)', '宣武區(qū)', '朝陽(yáng)區(qū)', '豐臺(tái)區(qū)', '石景山區(qū)', '海淀區(qū)', '門(mén)頭溝區(qū)', '房山區(qū)', '通州區(qū)', '順義區(qū)', '昌平區(qū)', '大興區(qū)', '懷柔區(qū)', '平谷區(qū)'] },
 { name: '縣', areaList: ['密云縣', '延慶縣'] }]
 },{
 name: '河南',
 cityList: [
 { name: '鄭州市', areaList: ['市轄區(qū)', '中原區(qū)', '二七區(qū)', '管城回族區(qū)', '金水區(qū)', '上街區(qū)', '邙山區(qū)', '中牟縣', '鞏義市', '滎陽(yáng)市', '新密市', '新鄭市', '登封市'] },
 { name: '開(kāi)封市', areaList: ['市轄區(qū)', '龍亭區(qū)', '順河回族區(qū)', '鼓樓區(qū)', '南關(guān)區(qū)', '郊　區(qū)', '杞　縣', '通許縣', '尉氏縣', '開(kāi)封縣', '蘭考縣'] },
 { name: '洛陽(yáng)市', areaList: ['市轄區(qū)', '老城區(qū)', '西工區(qū)', '廛河回族區(qū)', '澗西區(qū)', '吉利區(qū)', '洛龍區(qū)', '孟津縣', '新安縣', '欒川縣', '嵩　縣', '汝陽(yáng)縣', '宜陽(yáng)縣', '洛寧縣', '伊川縣', '偃師市'] },
 { name: '新鄉(xiāng)市', areaList: ['市轄區(qū)', '紅旗區(qū)', '衛(wèi)濱區(qū)', '鳳泉區(qū)', '牧野區(qū)', '新鄉(xiāng)縣', '獲嘉縣', '原陽(yáng)縣', '延津縣', '封丘縣', '長(zhǎng)垣縣', '衛(wèi)輝市', '輝縣市'] },
 { name: '焦作市', areaList: ['市轄區(qū)', '解放區(qū)', '中站區(qū)', '馬村區(qū)', '山陽(yáng)區(qū)', '修武縣', '博愛(ài)縣', '武陟縣', '溫　縣', '濟(jì)源市', '沁陽(yáng)市', '孟州市'] }]
 },{
 name: '湖北',
 cityList: [
 { name: '武漢市', areaList: ['市轄區(qū)', '江岸區(qū)', '江漢區(qū)', '喬口區(qū)', '漢陽(yáng)區(qū)', '武昌區(qū)', '青山區(qū)', '洪山區(qū)', '東西湖區(qū)', '漢南區(qū)', '蔡甸區(qū)', '江夏區(qū)', '黃陂區(qū)', '新洲區(qū)'] },
 { name: '黃石市', areaList: ['市轄區(qū)', '黃石港區(qū)', '西塞山區(qū)', '下陸區(qū)', '鐵山區(qū)', '陽(yáng)新縣', '大冶市'] },
 { name: '十堰市', areaList: ['市轄區(qū)', '茅箭區(qū)', '張灣區(qū)', '鄖　縣', '鄖西縣', '竹山縣', '竹溪縣', '房　縣', '丹江口市'] }]
 }
 ];
 var provinceArray = new Array();
 var cityArray = new Array();
 var areaArray = new Array();
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 window.onload = function(){ //用window的onload事件，窗體加載完畢的時(shí)候
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 for (var i = 0; i < provinceList.length; i++) {
 var province = provinceList[i]; //獲取省
 var provinceName = province.name; //獲取省名
 console.log(provinceName);
 provinceArray[i] = provinceName;
 provinceTag.add(new Option(provinceName, i));
 //通過(guò)Option方法將省名與下標(biāo)對(duì)應(yīng)，再將名字放到provinceTag中
 }
 }
 
 //建立省市之間的連接
 function chooseProvince(th) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = th.selectedIndex - 1; //“請(qǐng)選擇省” 占了一個(gè)索引，所以需要減1
 var provinceName = provinceArray[index]; //獲取省名
 for (var n = 0; n < provinceList.length; n++) {
 var provice = provinceList[n];
 console.log(provice.name == provinceName); //控制臺(tái)打印方便觀看
 if (provice.name == provinceName) { //開(kāi)始建立連接，通過(guò)if判斷，前提是要滿足if中的條件
  cityList = provice.cityList; //通過(guò)province的cityList獲取城市列表
  cityTag.innerHTML = ""; //保證city為所選中的省的市
  console.log(cityList); //控制臺(tái)打印
  for (var c = 0; c < cityList.length; c++) {
  var city = cityList[c]; //獲取城市
  var cityName = city.name; //獲取城市名
  cityArray[c] = cityName;
  cityTag.add(new Option(cityName, c)); //使用Option()方法獲取每一個(gè)索引對(duì)應(yīng)的數(shù)據(jù)，然后使用add()方法存入到數(shù)組中去，創(chuàng)建省市連接
  }
 }
 }
 }
 
 // 建立市縣之間的連接
 function chooseCity(ci) {
 var provinceTag = document.getElementById("province");
 var cityTag = document.getElementById("city");
 var areaTag = document.getElementById("area");
 var index = ci.selectedIndex;
 var cityName = cityArray[index];//獲取城市名
 for (var j = 0; j < cityList.length; j++) {
 var city = cityList[j];//獲取城市
 if (city.name == cityName) {
  var areaList = city.areaList;//縣級(jí)列表數(shù)據(jù)
  areaTag.innerHTML = "";
  for (var k = 0; k < areaList.length; k++) {
  var area = areaList[k];//獲取縣
  areaTag.add(new Option(area, k));
  }
 }
 }
 }
 </script>
</body>
 
</html>

效果如下