JavaScript三級(jí)聯(lián)動(dòng)

三級(jí)聯(lián)動(dòng)可以讓用戶方便地選擇合適的選項(xiàng)。例如，我們可以通過(guò)一個(gè)下拉菜單來(lái)選擇省、市和縣。JavaScript三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)起來(lái)并不復(fù)雜，只需要掌握一些基本知識(shí)。

第一步：準(zhǔn)備數(shù)據(jù)

首先，我們需要準(zhǔn)備三個(gè)下拉菜單的選項(xiàng)。這些選項(xiàng)需要以層次結(jié)構(gòu)的形式存儲(chǔ)。例如：

let data = {
"北京市": {
"海淀區(qū)": ["上地街道", "中關(guān)村街道", "清華園街道"],
"東城區(qū)": ["東華門(mén)街道", "景山街道", "交道口街道"]
},
"河北省": {
"石家莊市": ["長(zhǎng)安區(qū)", "橋西區(qū)", "新華區(qū)"],
"保定市": ["競(jìng)秀區(qū)", "蓮池區(qū)", "清苑區(qū)"]
},
"上海市": {
"普陀區(qū)": ["長(zhǎng)壽路街道", "甘泉路街道", "江寧路街道"],
"黃浦區(qū)": ["南京東路街道", "外灘街道", "半淞園路街道"]
},
... // 其他省市縣數(shù)據(jù)
}

第二步：獲取用戶選擇的值

當(dāng)用戶選擇一個(gè)選項(xiàng)時(shí)，我們需要獲取其值，并根據(jù)該值動(dòng)態(tài)生成下一個(gè)下拉菜單的選項(xiàng)。

function getSelectedValue(id) {
let select = document.getElementById(id);
return select.options[select.selectedIndex].value;
}
function updateCity() {
let province = getSelectedValue("province");
let cities = data[province];
let citySelect = document.getElementById("city");
citySelect.options.length = 0;
let defaultOption = document.createElement("option");
defaultOption.text = "請(qǐng)選擇市/區(qū)";
citySelect.add(defaultOption);
citySelect.selectedIndex = 0;
for (let city in cities) {
let option = document.createElement("option");
option.text = city;
option.value = city;
citySelect.add(option);
}
updateDistrict();
}
function updateDistrict() {
let province = getSelectedValue("province");
let city = getSelectedValue("city");
let districts = data[province][city];
let districtSelect = document.getElementById("district");
districtSelect.options.length = 0;
let defaultOption = document.createElement("option");
defaultOption.text = "請(qǐng)選擇縣/區(qū)";
districtSelect.add(defaultOption);
districtSelect.selectedIndex = 0;
for (let i = 0; i < districts.length; i++) {
let option = document.createElement("option");
option.text = districts[i];
option.value = districts[i];
districtSelect.add(option);
}
}

第三步：動(dòng)態(tài)生成下一個(gè)下拉菜單

當(dāng)用戶選擇完省份后，我們需要根據(jù)省份的值動(dòng)態(tài)生成市的下拉菜單選項(xiàng)。當(dāng)用戶選擇完市以后，我們需要根據(jù)市的值動(dòng)態(tài)生成縣的下拉菜單選項(xiàng)。這可以通過(guò)JavaScript中的DOM操作實(shí)現(xiàn)。

<select id="province" onchange="updateCity()">
<option value="">請(qǐng)選擇省份</option>
<option value="北京市">北京市</option>
<option value="河北省">河北省</option>
<option value="上海市">上海市</option>
...
</select>
<select id="city" onchange="updateDistrict()">
<option value="">請(qǐng)選擇市/區(qū)</option>
</select>
<select id="district">
<option value="">請(qǐng)選擇縣/區(qū)</option>
</select>

完整代碼如下：

let data = {
"北京市": {
"海淀區(qū)": ["上地街道", "中關(guān)村街道", "清華園街道"],
"東城區(qū)": ["東華門(mén)街道", "景山街道", "交道口街道"]
},
"河北省": {
"石家莊市": ["長(zhǎng)安區(qū)", "橋西區(qū)", "新華區(qū)"],
"保定市": ["競(jìng)秀區(qū)", "蓮池區(qū)", "清苑區(qū)"]
},
"上海市": {
"普陀區(qū)": ["長(zhǎng)壽路街道", "甘泉路街道", "江寧路街道"],
"黃浦區(qū)": ["南京東路街道", "外灘街道", "半淞園路街道"]
},
// 其他省市縣數(shù)據(jù)
}
function getSelectedValue(id) {
let select = document.getElementById(id);
return select.options[select.selectedIndex].value;
}
function updateCity() {
let province = getSelectedValue("province");
let cities = data[province];
let citySelect = document.getElementById("city");
citySelect.options.length = 0;
let defaultOption = document.createElement("option");
defaultOption.text = "請(qǐng)選擇市/區(qū)";
citySelect.add(defaultOption);
citySelect.selectedIndex = 0;
for (let city in cities) {
let option = document.createElement("option");
option.text = city;
option.value = city;
citySelect.add(option);
}
updateDistrict();
}
function updateDistrict() {
let province = getSelectedValue("province");
let city = getSelectedValue("city");
let districts = data[province][city];
let districtSelect = document.getElementById("district");
districtSelect.options.length = 0;
let defaultOption = document.createElement("option");
defaultOption.text = "請(qǐng)選擇縣/區(qū)";
districtSelect.add(defaultOption);
districtSelect.selectedIndex = 0;
for (let i = 0; i < districts.length; i++) {
let option = document.createElement("option");
option.text = districts[i];
option.value = districts[i];
districtSelect.add(option);
}
}

三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)并不復(fù)雜。只要跟著上面的步驟一步步做，就可以輕松地為自己的網(wǎng)站添加這一功能。