省市縣三級聯動的實現

一、前言

在網頁的表單中，省市縣三級聯動是非常常見的需求。用戶選擇省份後，自動加載該省份的市列表；用戶選擇市後，自動加載該市的縣列表。本文將介紹如何使用HTML、CSS和JavaScript實現省市縣三級聯動功能。

二、HTML部分

首先，我們需要在HTML文件中創建三個下拉框，分別對應省、市、縣：

<select id="province">
    <option value="">請選擇省份</option>
</select>

<select id="city">
    <option value="">請選擇市</option>
</select>

<select id="county">
    <option value="">請選擇縣區</option>
</select>

需要注意的是，初始時下拉框中應該顯示「請選擇省份」、「請選擇市」和「請選擇縣區」，因此我們在option標籤中的value屬性中留空，這樣用戶在未進行選擇時提交的值也將為空。

三、CSS部分

為了美觀，我們可以在CSS中為三個下拉框添加一些樣式。例如：

select {
    padding: 6px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

option {
    font-size: 14px;
}

這段代碼使得下拉框有較為明顯的邊框，選項字體較小。

四、JavaScript部分

接下來是最重要的部分，我們需要使用JavaScript實現省市縣三級聯動。

首先，我們需要定義省、市、縣三個數組，用於存儲相關信息。例如：

var provinces = [
    {name: '北京', cities: ['北京市']},
    {name: '上海', cities: ['上海市']},
    {name: '河北省', cities: ['石家莊市', '唐山市', '邯鄲市', '秦皇島市', '保定市', '張家口市']},
    {name: '江蘇省', cities: ['南京市', '蘇州市', '無錫市', '常州市', '揚州市']}
];

var cities = [
    {name: '北京市', counties: ['東城區', '西城區', '朝陽區', '海淀區', '丰台區']},
    {name: '上海市', counties: ['黃浦區', '徐匯區', '長寧區', '靜安區', '普陀區']},
    {name: '石家莊市', counties: ['長安區', '橋西區', '新華區', '裕華區', '井陘礦區']},
    {name: '唐山市', counties: ['路北區', '路南區', '古冶區', '開平區', '曹妃甸區']},
    {name: '邯鄲市', counties: ['邯山區', '叢台區', '復興區', '峰峰礦區', '肥鄉區']},
    {name: '南京市', counties: ['玄武區', '秦淮區', '鼓樓區', '建鄴區', '雨花台區']},
    {name: '蘇州市', counties: ['姑蘇區', '虎丘區', '吳中區', '相城區', '吳江區']}
];

var counties = [
    {name: '東城區'},
    {name: '西城區'},
    {name: '朝陽區'},
    {name: '海淀區'},
    {name: '丰台區'},
    {name: '黃浦區'},
    {name: '徐匯區'},
    {name: '長寧區'},
    {name: '靜安區'},
    {name: '普陀區'},
    {name: '長安區'},
    {name: '橋西區'},
    {name: '新華區'},
    {name: '裕華區'},
    {name: '井陘礦區'},
    {name: '路北區'},
    {name: '路南區'},
    {name: '古冶區'},
    {name: '開平區'},
    {name: '曹妃甸區'},
    {name: '邯山區'},
    {name: '叢台區'},
    {name: '復興區'},
    {name: '峰峰礦區'},
    {name: '肥鄉區'},
    {name: '玄武區'},
    {name: '秦淮區'},
    {name: '鼓樓區'},
    {name: '建鄴區'},
    {name: '雨花台區'},
    {name: '姑蘇區'},
    {name: '虎丘區'},
    {name: '吳中區'},
    {name: '相城區'},
    {name: '吳江區'}
];

然後，我們需要在頁面加載完成時向省份下拉框中動態添加選項。實現方法如下：

// 動態加載省份列表
function loadProvinces() {
    var selectProvince = document.getElementById('province');
    for (var i = 0; i < provinces.length; i++) {
        var option = document.createElement('option');
        option.value = provinces[i].name;
        option.text = provinces[i].name;
        selectProvince.add(option);
    }
}
loadProvinces();

該函數將循環遍歷provinces數組，並將每個省份的名稱動態添加到省份下拉框中。同時，為了便於後續的操作，我們需要在省份的option標籤中添加一個自定義屬性，用於存放該省份的市列表，例如：

option.cities = provinces[i].cities;

接下來，我們需要為省份下拉框綁定change事件，當用戶選擇某個省份時，動態加載該省份的市列表。實現方法如下：

var selectProvince = document.getElementById('province');
var selectCity = document.getElementById('city');
var selectCounty = document.getElementById('county');

// 省份下拉框選擇事件
selectProvince.onchange = function() {
    // 先清除市和縣區下拉框的選項
    selectCity.options.length = 1;
    selectCounty.options.length = 1;
    // 獲取當前選中的省份名稱
    var provinceName = this.options[this.selectedIndex].value;
    // 查找該省份的市列表
    for (var i = 0; i < provinces.length; i++) {
        if (provinces[i].name === provinceName) {
            var cities = provinces[i].cities;
            // 動態加載市列表
            for (var j = 0; j < cities.length; j++) {
                var option = document.createElement('option');
                option.value = cities[j];
                option.text = cities[j];
                selectCity.add(option);
            }
            // 在省份的option標籤中添加一個自定義屬性，用於存放該省份的市列表
            selectProvince.options[this.selectedIndex].cities = cities;
            break;
        }
    }
}

該函數在省份下拉框change事件觸發時，先清除市和縣區下拉框中原有的選項。然後獲取用戶選擇的省份名稱，並查找該省份的市列表。將市列表動態添加到市下拉框中，並在省份的option標籤中添加一個自定義屬性，用於存放該省份的市列表。

接下來，我們需要為市下拉框綁定change事件，當用戶選擇某個市時，動態加載該市的縣區列表。實現方法如下：

// 市下拉框選擇事件
selectCity.onchange = function() {
    // 先清除縣區下拉框的選項
    selectCounty.options.length = 1;
    // 獲取當前選中的市名稱
    var cityName = this.options[this.selectedIndex].value;
    // 查找該市的縣區列表
    for (var i = 0; i < cities.length; i++) {
        if (cities[i].name === cityName) {
            var counties = cities[i].counties;
            // 動態加載縣區列表
            for (var j = 0; j < counties.length; j++) {
                var option = document.createElement('option');
                option.value = counties[j];
                option.text = counties[j];
                selectCounty.add(option);
            }
            break;
        }
    }
}

該函數在市下拉框change事件觸發時，先清除縣區下拉框中原有的選項。然後獲取用戶選擇的市名稱，並查找該市的縣區列表。將縣區列表動態添加到縣區下拉框中。

五、Demo演示

下面是完整的代碼示例。複製代碼並保存為.html文件，用瀏覽器打開即可看到實際效果。

 select {
 padding: 6px;
 font-size: 16px;
 border-radius: 5px;
 border: 1px solid #ccc;
 }
 option {
 font-size: 14px;
 }
 請選擇省份
 請選擇市
 請選擇縣區
 var provinces = [
 {name: '北京', cities: ['北京市']},
 {name: '上海', cities: ['上海市']},
 {name: '河北省', cities: ['石家莊市', '唐山市', '邯鄲市', '秦皇島市', '保定市', '張家口市']},
 {name: '江蘇省', cities: ['南京市', '蘇州市', '無錫市', '常州市', '揚州市']}
 ];
 var cities = [
 {name: '北京市', counties: ['東城區', '西城區', '朝陽區', '海淀區', '丰台區']},
 {name: '上海市', counties: ['黃浦區', '徐匯區', '長寧區', '靜安區', '普陀區']},
 {name: '石家莊市', counties: ['長安區', '橋西區', '新華區', '裕華區', '井陘礦區']},
 {name: '唐山市', counties: ['路北區', '路南區', '古冶區', '開平區', '曹妃甸區']},
 {name: '邯鄲市', counties: ['邯山區', '叢台區', '復興區', '峰峰礦區', '肥鄉區']},
 {name: '南京市', counties: ['玄武區', '秦淮區', '鼓樓區', '建鄴區', '雨花台區']},
 {name: '蘇州市', counties: ['姑蘇區', '虎丘區', '吳中區', '相城區', '吳江區']}
 ];
 var counties = [
 {name: '東城區'},
 {name: '西城區'},
 {name: '朝陽區'},
 {name: '海淀區'},
 {name: '丰台區'},
 {name: '黃浦區'},
 {name: '徐匯區'},
 {name: '長寧區'},
 {name: '靜安區'},
 {name: '普陀區'},
 {name: '長安區'},
 {name: '橋西區'},
 {name: '新華區'},
 {name: '裕華區'},
 {name:
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/184999.html