當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
纯JS实现省市县三级下拉联动
生活随笔
收集整理的這篇文章主要介紹了
纯JS实现省市县三级下拉联动
小編覺得挺不錯的,現(xià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" onchange="chooseProvince(this)"><option value="1">--請選擇省--</option></select><select id="city" onchange="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ū)', '南關(guān)區(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方法將省名與下標對應(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; //“請選擇省” 占了一個索引，所以需要減1var 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()方法獲取每一個索引對應(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;//縣級列表數(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>效果如下?
總結(jié)
以上是生活随笔為你收集整理的纯JS实现省市县三级下拉联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 震惊！Canvas原来还能这么搞！代码画
- 下一篇： 你需要了解的纯原生JS实现带有功能的前端