用jquery写城市三级联动

城市三级联动是一种常见的Web页面交互功能，它可以让用户在不同层级的城市信息中进行选择，从而快速找到所需内容，在本文中，我们将详细介绍如何使用jQuery库来实现这一功能，我们将从头开始创建一个简单的城市三级联动示例，使您能够轻松地将其应用到您的项目中。

我们需要创建一个基本的HTML结构，用于容纳城市数据，这里我们使用一个包含三个下拉列表的简单布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市三级联动示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district">
        <option value="">请选择区县</option>
    </select>
    <script src="main.js"></script>
</body>
</html>

接下来，我们需要为每个下拉列表提供数据，这里我们使用JSON格式的数组来存储城市信息，您可以根据需要修改这些数据。

const cityData = [
    {
        name: "广东省",
        cities: [
            {
                name: "广州市",
                districts: [
                    { name: "越秀区" },
                    { name: "海珠区" },
                    { name: "荔湾区" },
                    // 更多区县...
                ],
            },
            {
                name: "深圳市",
                districts: [
                    { name: "南山区" },
                    { name: "福田区" },
                    { name: "罗湖区" },
                    // 更多区县...
                ],
            },
            // 更多城市...
        ],
    },
    // 更多省份...
];

现在我们需要编写一个jQuery脚本来处理用户的选择，并更新下拉列表，我们将创建一个名为main.js的文件，用于存放这些脚本。

我们需要为每个下拉列表绑定change事件，以便在用户更改选择时触发相应的操作。

$(document).ready(function() {
    function updateCityList(province, city) {
        let cityList = cityData.find(p => p.name === province).cities;
        let selectedCity = cityList.find(c => c.name === city);
        $("#city").html(<option value="">请选择城市</option>);
        cityList.forEach(city => {
            $("#city").append(<option value="${city.name}">${city.name}</option>);
        });
        if (selectedCity) {
            $("#city").val(selectedCity.name);
            updateDistrictList(selectedCity.name, selectedCity.districts);
        }
    }
    function updateDistrictList(city, district) {
        let districtList = cityData.find(p => p.cities.find(c => c.name === city)).districts;
        let selectedDistrict = districtList.find(d => d.name === district);
        $("#district").html(<option value="">请选择区县</option>);
        districtList.forEach(district => {
            $("#district").append(<option value="${district.name}">${district.name}</option>);
        });
        if (selectedDistrict) {
            $("#district").val(selectedDistrict.name);
        }
    }
    $("#province").change(function() {
        let province = $(this).val();
        let city = "";
        let district = "";
        if (province) {
            city = cityData.find(p => p.name === province).cities[0].name;
            district = cityData.find(p => p.name === province).cities[0].districts[0].name;
        }
        updateCityList(province, city);
        updateDistrictList(city, district);
    });
    $("#city").change(function() {
        let city = $(this).val();
        let district = "";
        if (city) {
            district = cityData.find(p => p.cities.find(c => c.name === city)).districts[0].name;
        }
        updateDistrictList(city, district);
    });
});

在这个脚本中，我们定义了两个函数：updateCityList和updateDistrictList，这两个函数分别用于更新城市列表和区县列表，我们还为#province和#city元素绑定了change事件，以便在用户更改选择时调用这些函数。

现在，当用户从省份列表中选择一个省份时，城市列表将自动更新为该省份下的城市，同样，当用户从城市列表中选择一个城市时，区县列表将自动更新为该城市下的区县。

这个简单的城市三级联动示例展示了如何使用jQuery来处理用户输入并更新页面内容，您可以根据自己的需求修改这个示例，以便更好地适应您的项目。

谷歌浏览器

谷歌浏览器

谷歌浏览器