JS實現省市縣三級下拉聯動
阿新 • • 發佈：2020-04-12
純JS實現省市縣三級下拉聯動，供大家參考，具體內容如下
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市縣三級下拉聯動-李康</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">--請選擇區--</option>
</select>
</fieldset>
</form>
<script>
var provinceList = [{
name: '北京',cityList: [
{ name: '市轄區',areaList: ['東城區','西城區','崇文區','宣武區','朝陽區','豐臺區','石景山區','海淀區','門頭溝區','房山區','通州區','順義區','昌平區','大興區','懷柔區','平谷區'] },{ name: '縣',areaList: ['密雲縣','延慶縣'] }]
},{
name: '河南',cityList: [
{ name: '鄭州市',areaList: ['市轄區','中原區','二七區','管城回族區','金水區','上街區','邙山區','中牟縣','鞏義市','滎陽市','新密市','新鄭市','登封市'] },{ name: '開封市','龍亭區','順河回族區','鼓樓區','南關區','郊 區','杞 縣','通許縣','尉氏縣','開封縣','蘭考縣'] },{ name: '洛陽市','老城區','西工區','廛河回族區','澗西區','吉利區','洛龍區','孟津縣','新安縣','欒川縣','嵩 縣','汝陽縣','宜陽縣','洛寧縣','伊川縣','偃師市'] },{ name: '新鄉市','紅旗區','衛濱區','鳳泉區','牧野區','新鄉縣','獲嘉縣','原陽縣','延津縣','封丘縣','長垣縣','衛輝市','輝縣市'] },{ name: '焦作市','解放區','中站區','馬村區','山陽區','修武縣','博愛縣','武陟縣','溫 縣','濟源市','沁陽市','孟州市'] }]
},{
name: '湖北',cityList: [
{ name: '武漢市','江岸區','江漢區','喬口區','漢陽區','武昌區','青山區','洪山區','東西湖區','漢南區','蔡甸區','江夏區','黃陂區','新洲區'] },{ name: '黃石市','黃石港區','西塞山區','下陸區','鐵山區','陽新縣','大冶市'] },{ name: '十堰市','茅箭區','張灣區','鄖 縣','鄖西縣','竹山縣','竹溪縣','房 縣','丹江口市'] }]
}
];
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()方法存入到陣列中去，建立省市連線
}
}
}
}
// 建立市縣之間的連線
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>效果如下
如果大家還想深入學習，可以點選jquery下拉框效果彙總、JavaScript下拉框效果彙總進行學習。
以上就是javascript實現省市區三級聯動下拉框選單的全部程式碼，希望對大家的學習有所幫助。