純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" 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">--請選擇區--</option>
</select>
</fieldset>
</form>
<script>
var provinceList = [{
name: '北京',
cityList: [
{ name: '市轄區', areaList: ['東城區', '西城區', '崇文區', '宣武區', '朝陽區', '豐臺區', '石景山區', '海淀區', '門頭溝區', '房山區', '通州區', '順義區', '昌平區', '大興區', '懷柔區', '平谷區'] },
{ name: '縣', areaList: ['密雲縣', '延慶縣'] }]
},{
name: '河南',
cityList: [
{ name: '鄭州市', areaList: ['市轄區', '中原區', '二七區', '管城回族區', '金水區', '上街區', '邙山區', '中牟縣', '鞏義市', '滎陽市', '新密市', '新鄭市', '登封市'] },
{ name: '開封市', areaList: ['市轄區', '龍亭區', '順河回族區', '鼓樓區', '南關區', '郊 區', '杞 縣', '通許縣', '尉氏縣', '開封縣', '蘭考縣'] },
{ name: '洛陽市', areaList: ['市轄區', '老城區', '西工區', '廛河回族區', '澗西區', '吉利區', '洛龍區', '孟津縣', '新安縣', '欒川縣', '嵩 縣', '汝陽縣', '宜陽縣', '洛寧縣', '伊川縣', '偃師市'] },
{ name: '新鄉市', areaList: ['市轄區', '紅旗區', '衛濱區', '鳳泉區', '牧野區', '新鄉縣', '獲嘉縣', '原陽縣', '延津縣', '封丘縣', '長垣縣', '衛輝市', '輝縣市'] },
{ name: '焦作市', areaList: ['市轄區', '解放區', '中站區', '馬村區', '山陽區', '修武縣', '博愛縣', '武陟縣', '溫 縣', '濟源市', '沁陽市', '孟州市'] }]
},{
name: '湖北',
cityList: [
{ name: '武漢市', areaList: ['市轄區', '江岸區', '江漢區', '喬口區', '漢陽區', '武昌區', '青山區', '洪山區', '東西湖區', '漢南區', '蔡甸區', '江夏區', '黃陂區', '新洲區'] },
{ name: '黃石市', areaList: ['市轄區', '黃石港區', '西塞山區', '下陸區', '鐵山區', '陽新縣', '大冶市'] },
{ name: '十堰市', areaList: ['市轄區', '茅箭區', '張灣區', '鄖 縣', '鄖西縣', '竹山縣', '竹溪縣', '房 縣', '丹江口市'] }]
}
];
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>
效果如下
