代碼實現
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS的三級聯動</title>
<style>
.js-demo {
width: 700px;
margin: 0 auto;
padding-top: 100px;
}
select {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="js-demo">
省份：
<select id="province"></select>
城市：
<select id="city"></select>
區縣：
<select id="county"></select>
</div>
<script>
// ===== ===== ===== 獲取select元素 ===== ===== =====
// 獲取下拉表單
var select_province = document.getElementById('province');
var select_city = document.getElementById('city');
var select_county = document.getElementById('county');
// ===== ===== ===== 准備三級聯動的數據 ===== ===== =====
// 省份
var arr_province = [
// 省份ID, 省份名稱
{ id: 110000, name: '北京市' },
{ id: 120000, name: '天津市' },
{ id: 130000, name: '河北省' },
{ id: 140000, name: '山西省' },
{ id: 150000, name: '內蒙古自治區' },
{ id: 210000, name: '遼寧省' },
{ id: 220000, name: '吉林省' },
{ id: 230000, name: '黑龍江省' },
{ id: 310000, name: '上海市' },
{ id: 320000, name: '江蘇省' }
];
// 城市
var arr_city = [
// 城市ID, 城市名稱, 城市所屬的省份（即本級的上一級的ID）
{ id: 110000, name: '北京市', province_id: 110000 },
{ id: 120000, name: '天津市', province_id: 120000 },
{ id: 320100, name: '南京市', province_id: 320000 },
{ id: 320200, name: '無錫市', province_id: 320000 },
{ id: 320300, name: '徐州市', province_id: 320000 },
{ id: 320400, name: '常州市', province_id: 320000 },
{ id: 320500, name: '蘇州市', province_id: 320000 },
{ id: 320600, name: '南通市', province_id: 320000 },
{ id: 320700, name: '連雲港市', province_id: 320000 },
{ id: 320800, name: '淮安市', province_id: 320000 }
];
// 區縣
var arr_county = [
// 區縣ID, 區縣名稱, 區縣所屬的城市（即本級的上一級的ID）
{ id: 110101, name: '東城區', city_id: 110000 },
{ id: 110102, name: '西城區', city_id: 110000 },
{ id: 110105, name: '朝陽區', city_id: 110000 },
{ id: 110106, name: '豐台區', city_id: 110000 },
{ id: 110107, name: '石景山區', city_id: 110000 },
{ id: 110108, name: '海淀區', city_id: 110000 },
{ id: 110109, name: '門頭溝區', city_id: 110000 },
{ id: 110111, name: '房山區', city_id: 110000 },
{ id: 110112, name: '通州區', city_id: 110000 },
{ id: 110113, name: '順義區', city_id: 110000 },
{ id: 110114, name: '昌平區', city_id: 110000 },
{ id: 110115, name: '大興區', city_id: 110000 },
{ id: 110116, name: '懷柔區', city_id: 110000 },
{ id: 110117, name: '平谷區', city_id: 110000 },
{ id: 110118, name: '密雲區', city_id: 110000 },
{ id: 110119, name: '延慶區', city_id: 110000 },
{ id: 320102, name: '玄武區', city_id: 320100 },
{ id: 320104, name: '秦淮區', city_id: 320100 },
{ id: 320105, name: '建鄴區', city_id: 320100 },
{ id: 320106, name: '鼓樓區', city_id: 320100 },
{ id: 320111, name: '浦口區', city_id: 320100 },
{ id: 320113, name: '棲霞區', city_id: 320100 },
{ id: 320114, name: '雨花台區', city_id: 320100 },
{ id: 320115, name: '江寧區', city_id: 320100 },
{ id: 320116, name: '六合區', city_id: 320100 },
{ id: 320117, name: '溧水區', city_id: 320100 },
{ id: 320118, name: '高淳區', city_id: 320100 },
{ id: 320117, name: '溧水區', city_id: 320100 }
];
// ===== ===== ===== 給select填充數據的操作 ===== ===== =====
// 填充province
function addDataProvince() {
var html = "<option value='0'>請選擇省份</option>";
var length = arr_province.length;
for (var i = 0; i < length; i++) {
html += "<option value='" + arr_province[i].id + "'>" + arr_province[i].name + "</option>";
}
select_province.innerHTML = html;
}
// 填充city
function addDataCity(provinceId) {
var html = "<option value='0'>請選擇城市</option>";
var length = arr_city.length;
for (var i = 0; i < length; i++) {
var obj = arr_city[i];
if (obj.province_id == provinceId) {
html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
}
}
select_city.innerHTML = html;
}
// 填充county
function addDataCounty(cityId) {
var html = "<option value='0'>請選擇區縣</option>";
var length = arr_county.length;
for (var i = 0; i < length; i++) {
var obj = arr_county[i];
if (obj.city_id == cityId) {
html += "<option value='" + obj.id + "'>" + obj.name + "</option>";
}
}
select_county.innerHTML = html;
}
// ===== ===== ===== 給select綁定change事件 ===== ===== =====
// select_province綁定change事件
select_province.onchange = function () {
var provinceId = select_province.value;
addDataCity(provinceId);
};
// select_city綁定change事件
select_city.onchange = function () {
var cityId = select_city.value;
addDataCounty(cityId);
};
// select初始化數據
addDataProvince();
addDataCity(arr_province[0].id);
addDataCounty(arr_city[0].id);
/* 核心思想就是，通過監聽上一級的變化獲得上級的value，進而改變本級顯示的列表內容。*/
</script>
</body>
</html>
效果圖如下：
本文鏈接：https://www.cnblogs.com/connect/p/web-three-level-linkage.html