JS實現省市縣三級下拉聯(lián)動

更新時間：2020年04月10日 11:30:43 作者：外號班長

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

純JS實現省市縣三級下拉聯(lián)動，供大家參考，具體內容如下

代碼如下：

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

效果如下