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

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

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

純JS實現(xiàn)省市縣三級下拉聯(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()方法獲取每一個索引對應的數(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;//縣級列表數(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>

效果如下

如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。

以上就是javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單的全部代碼，希望對大家的學習有所幫助。

您可能感興趣的文章:

jquery將標簽元素的高設為屏幕的百分比
這篇文章主要介紹了js將標簽元素的高設為屏幕的百分比,需要的朋友可以參考下
2017-04-04
Js數(shù)組扁平化實現(xiàn)方法代碼總匯
這篇文章主要介紹了Js數(shù)組扁平化實現(xiàn)方法代碼總匯,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-11-11
Typescript的三種運行方式(小結)
這篇文章主要介紹了Typescript的三種運行方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
代碼短小的js div層拖動實現(xiàn)代碼[兼容IE與Firefox]
代碼短小的js div層拖動實現(xiàn)代碼[兼容IE與Firefox],需要的朋友可以參考下.
2010-05-05
JS實現(xiàn)橫向與豎向兩個選項卡Tab聯(lián)動的方法
這篇文章主要介紹了JS實現(xiàn)橫向與豎向兩個選項卡Tab聯(lián)動的方法,涉及JavaScript遍歷及動態(tài)修改頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
Javascript加載導出3dm文件的示例詳解
3DM?文件格式是由?Rhinoceros?3D（簡稱?Rhino）軟件使用的原生文件格式,本文主要介紹了如何利用Javascript加載導出3dm文件,需要的可以參考下
2024-11-11
Mock.js的安裝與使用教程(擺脫后端同學的束縛)
Mock功能可以根據(jù)接口/數(shù)據(jù)結構定義、Mock規(guī)則配置、Mock?期望配置，自動生成模擬數(shù)據(jù),且使用者可以根據(jù)需要靈活構造各種結構的接口數(shù)據(jù),下面這篇文章主要給大家介紹了關于Mock.js的安裝與使用的相關資料,需要的朋友可以參考下
2022-08-08
JavaScript DOM節(jié)點操作實例小結(新建,刪除HTML元素)
這篇文章主要介紹了JavaScript DOM節(jié)點操作,結合實例形式總結分析了JS操作DOM實現(xiàn)新建與刪除HTML元素的具體步驟與相關技巧,需要的朋友可以參考下
2017-01-01
js實現(xiàn)文字截斷功能
這篇文章主要為大家詳細介紹了js代碼如何實現(xiàn)文字截斷功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
javascript如何創(chuàng)建對象
這篇文章主要為大家詳細介紹了javascript創(chuàng)建對象的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08