整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
圖1
圖2
源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）
圖3
圖1
圖2
圖3
圖4
動(dòng)菜單通常是指一個(gè)下拉框的選項(xiàng)值發(fā)生改變后，另一個(gè)下拉框的選項(xiàng)值會(huì)發(fā)生對應(yīng)的變化。在 HTML 頁面中，可以使用 JavaScript 結(jié)合 HTML DOM 來實(shí)現(xiàn)這一功能。下面我來舉一個(gè)例子。
假設(shè)我們有三個(gè)下拉框，分別是“省份”、“城市”和“區(qū)縣”。當(dāng)“省份”下拉框的選項(xiàng)值發(fā)生改變時(shí)，我們需要?jiǎng)討B(tài)更新“城市”下拉框的選項(xiàng)值，并且根據(jù)“城市”的選項(xiàng)值動(dòng)態(tài)更新“區(qū)縣”下拉框的選項(xiàng)值。具體實(shí)現(xiàn)步驟如下：
1 首先在 HTML 文件中定義三個(gè)下拉框，并分別給它們一個(gè)唯一的 ID，如下所示：
<label>省份：</label>
<select id="province"></select>
<label>城市：</label>
<select id="city"></select>
<label>區(qū)縣：</label>
<select id="district"></select>2 在 JavaScript 中定義三個(gè)函數(shù)，分別用于更新“城市”、“區(qū)縣”下拉框的選項(xiàng)值，以及初始化頁面時(shí)的默認(rèn)值：
// 更新城市下拉框內(nèi)容
function updateCity() {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
citySelect.innerHTML = ""; // 清空城市下拉框內(nèi)容
// 根據(jù)選中的省份，獲取該省份對應(yīng)的城市列表
var provinceName = provinceSelect.value;
var cityList = getCityList(provinceName);
// 根據(jù)城市列表，動(dòng)態(tài)生成城市下拉框的選項(xiàng)
for (var i = 0; i < cityList.length; i++) {
var option = document.createElement("option");
option.text = cityList[i];
citySelect.add(option);
}
// 觸發(fā)區(qū)縣下拉框更新
updateDistrict();
}
// 更新區(qū)縣下拉框內(nèi)容
function updateDistrict() {
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
districtSelect.innerHTML = ""; // 清空區(qū)縣下拉框內(nèi)容
// 根據(jù)選中的城市，獲取該城市對應(yīng)的區(qū)縣列表
var cityName = citySelect.value;
var districtList = getDistrictList(cityName);
// 根據(jù)區(qū)縣列表，動(dòng)態(tài)生成區(qū)縣下拉框的選項(xiàng)
for (var i = 0; i < districtList.length; i++) {
var option = document.createElement("option");
option.text = districtList[i];
districtSelect.add(option);
}
}
// 初始化頁面
function initPage() {
var provinceSelect = document.getElementById("province");
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
// 根據(jù)省份列表，動(dòng)態(tài)生成省份下拉框的選項(xiàng)
for (var i = 0; i < provinceList.length; i++) {
var option = document.createElement("option");
option.text = provinceList[i];
provinceSelect.add(option);
}
// 觸發(fā)城市下拉框更新
updateCity();
}現(xiàn)在我們已經(jīng)完成了省份和城市兩個(gè)下拉框的聯(lián)動(dòng)效果，接下來我們需要再次綁定城市下拉框的change事件，以實(shí)現(xiàn)城市與區(qū)縣下拉框的聯(lián)動(dòng)。
首先，我們需要在HTML中添加第三個(gè)下拉框，用于選擇區(qū)縣：
<select id="county"></select>然后，我們需要更新updateCity和initPage兩個(gè)函數(shù)，使其能夠更新城市和區(qū)縣兩個(gè)下拉框：
function updateCity() {
var province = document.getElementById('province').value;
var cityOptions = '';
for (var i = 0; i < cities[province].length; i++) {
cityOptions += '<option value="' + cities[province][i] + '">' + cities[province][i] + '</option>';
}
document.getElementById('city').innerHTML = cityOptions;
// 清空區(qū)縣下拉框
document.getElementById('county').innerHTML = '<option value="">--請選擇--</option>';
}
function updateCounty() {
var province = document.getElementById('province').value;
var city = document.getElementById('city').value;
var countyOptions = '';
for (var i = 0; i < counties[province][city].length; i++) {
countyOptions += '<option value="' + counties[province][city][i] + '">' + counties[province][city][i] + '</option>';
}
document.getElementById('county').innerHTML = countyOptions;
}
function initPage() {
// 初始化省份下拉框
var provinceOptions = '<option value="">--請選擇--</option>';
for (var province in cities) {
provinceOptions += '<option value="' + province + '">' + province + '</option>';
}
document.getElementById('province').innerHTML = provinceOptions;
// 綁定省份下拉框的change事件
document.getElementById('province').addEventListener('change', updateCity);
// 初始化城市下拉框
updateCity();
// 綁定城市下拉框的change事件
document.getElementById('city').addEventListener('change', updateCounty);
// 初始化區(qū)縣下拉框
updateCounty();
}在updateCity函數(shù)中，我們添加了清空區(qū)縣下拉框的代碼，以確保每次更改城市時(shí)，區(qū)縣下拉框都會(huì)被清空。
在updateCounty函數(shù)中，我們根據(jù)選擇的省份和城市，動(dòng)態(tài)生成區(qū)縣下拉框的選項(xiàng)。
在initPage函數(shù)中，我們綁定了城市下拉框的change事件，并調(diào)用updateCounty函數(shù)初始化區(qū)縣下拉框的選項(xiàng)。
最后，我們需要在JavaScript代碼中定義counties變量，以存儲(chǔ)每個(gè)城市對應(yīng)的區(qū)縣信息：
var counties = {
"北京市": {
"市轄區(qū)": ["東城區(qū)", "西城區(qū)", "崇文區(qū)", "宣武區(qū)", "朝陽區(qū)", "豐臺(tái)區(qū)", "石景山區(qū)", "海淀區(qū)", "門頭溝區(qū)", "房山區(qū)", "通州區(qū)", "順義區(qū)", "昌平區(qū)", "大興區(qū)", "懷柔區(qū)", "平谷區(qū)"],
"縣": ["密云縣", "延慶縣"]
},
"上海市": {
"市轄區(qū)": ["黃浦區(qū)", "盧灣區(qū)", "徐匯區(qū)", "長寧區(qū)", "靜安區(qū)", "普陀區(qū)", "閘北區(qū)", "虹口區(qū)", "楊浦區(qū)", "閔行區(qū)", "寶山區(qū)", "嘉定區(qū)", "浦東新區(qū)", "金山區(qū)", "松江區(qū)", "青浦區(qū)", "南匯區(qū)", "奉賢區(qū)"],
"縣": ["崇明縣"]
},
// 省略部分?jǐn)?shù)據(jù)...
};接下來是第三個(gè)函數(shù)setDefaultValue()，用于初始化頁面時(shí)設(shè)置默認(rèn)值。在這個(gè)函數(shù)中，我們先根據(jù)省份的默認(rèn)值設(shè)置省份下拉框的選中項(xiàng)，然后根據(jù)省份和城市的默認(rèn)值，從數(shù)據(jù)中獲取相應(yīng)的區(qū)縣數(shù)據(jù)，并設(shè)置區(qū)縣下拉框的選項(xiàng)。
function setDefaultValue() {
// 設(shè)置省份下拉框默認(rèn)選中項(xiàng)
var provinceSelect = document.getElementById("province");
for (var i = 0; i < provinceSelect.options.length; i++) {
if (provinceSelect.options[i].value === defaultProvince) {
provinceSelect.selectedIndex = i;
break;
}
}
// 根據(jù)省份和城市設(shè)置區(qū)縣下拉框選項(xiàng)
var citySelect = document.getElementById("city");
var districtSelect = document.getElementById("district");
var districtData = data[defaultProvince][defaultCity];
districtSelect.options.length = 0; // 清空區(qū)縣下拉框
for (var i = 0; i < districtData.length; i++) {
var option = new Option(districtData[i], districtData[i]);
if (districtData[i] === defaultDistrict) {
option.selected = true; // 設(shè)置默認(rèn)選中項(xiàng)
}
districtSelect.options.add(option);
}
}在這個(gè)函數(shù)中，我們首先獲取省份下拉框的DOM元素，并通過循環(huán)找到選中項(xiàng)為默認(rèn)省份的選項(xiàng)，并設(shè)置為選中狀態(tài)。然后獲取城市和區(qū)縣的DOM元素，并從數(shù)據(jù)中獲取對應(yīng)的區(qū)縣數(shù)據(jù)。最后根據(jù)區(qū)縣數(shù)據(jù)動(dòng)態(tài)創(chuàng)建選項(xiàng)，并設(shè)置默認(rèn)選中項(xiàng)。注意，在設(shè)置區(qū)縣下拉框的選項(xiàng)時(shí)，我們先要將下拉框的長度設(shè)為0，以清空之前的選項(xiàng)。同時(shí)，我們還需要為新創(chuàng)建的選項(xiàng)設(shè)置selected屬性，以設(shè)置默認(rèn)選中項(xiàng)。
以上就是一個(gè)簡單的基于JavaScript和HTML DOM實(shí)現(xiàn)聯(lián)動(dòng)菜單的示例，可以根據(jù)具體的業(yè)務(wù)需求進(jìn)行擴(kuò)展和修改。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
