JS三级联动

最新推荐文章于 2024-07-09 18:13:44 发布

茶卡盐佑星_

最新推荐文章于 2024-07-09 18:13:44 发布

阅读量193

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/hexadecimal_001/article/details/138229412

版权

本文介绍了如何使用HTML和JavaScript实现三级联动下拉框功能，通过省份、城市和区县的数据绑定，实现用户在选择不同层级时自动筛选选项，提高用户体验。

摘要由CSDN通过智能技术生成

三级联动是指页面上有三个下拉框，第一个下拉框选定某个选项后，第二个下拉框会根据第一个下拉框的选项进行筛选，第三个下拉框会根据第二个下拉框的选项进行筛选。这种交互方式可以帮助用户快速定位到需要的选项。

下面是一个简单的三级联动的代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动</title>
</head>
<body>
<select id="province">
    <option value="">请选择省份</option>
    <option value="1">广东省</option>
    <option value="2">浙江省</option>
</select>

<select id="city">
    <option value="">请选择城市</option>
</select>

<select id="district">
    <option value="">请选择区县</option>
</select>

<script>
const cityData = {
    1: ["广州市", "深圳市", "珠海市"],
    2: ["杭州市", "宁波市", "温州市"]
};

const districtData = {
    "广州市": ["天河区", "越秀区", "海珠区"],
    "深圳市": ["福田区", "罗湖区", "南山区"],
    "杭州市": ["西湖区", "拱墅区", "滨江区"],
    "宁波市": ["海曙区", "江东区", "江北区"]
};

const province = document.getElementById("province");
const city = document.getElementById("city");
const district = document.getElementById("district");

province.addEventListener("change", function() {
    city.innerHTML = "<option value=''>请选择城市</option>";
    district.innerHTML = "<option value=''>请选择区县</option>";

    const selectedProvince = province.value;
    const cities = cityData[selectedProvince];
    cities.forEach(function(item) {
        const option = document.createElement("option");
        option.value = item;
        option.textContent = item;
        city.appendChild(option);
    });
});

city.addEventListener("change", function() {
    district.innerHTML = "<option value=''>请选择区县</option>";

    const selectedCity = city.value;
    const districts = districtData[selectedCity];
    districts.forEach(function(item) {
        const option = document.createElement("option");
        option.value = item;
        option.textContent = item;
        district.appendChild(option);
    });
});
</script>
</body>
</html>

在这个代码实例中，我们定义了两个对象cityData和districtData，分别存储了省份、城市和区县的数据。然后通过事件监听器，实现了省份、城市和区县三个下拉框的联动效果。当选择省份后，城市下拉框会根据省份的选择进行筛选，选择城市后，区县下拉框会根据城市的选择进行筛选。这样用户就可以方便快速地选择到需要的选项。

茶卡盐佑星_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS三级联动

分别存储了省份、城市和区县的数据。然后通过事件监听器，实现了省份、城市和区县三个下拉框的联动效果。当选择省份后，城市下拉框会根据省份的选择进行筛选，选择城市后，区县下拉框会根据城市的选择进行筛选。这样用户就可以方便快速地选择到需要的选项。三级联动是指页面上有三个下拉框，第一个下拉框选定某个选项后，第二个下拉框会根据第一个下拉框的选项进行筛选，第三个下拉框会根据第二个下拉框的选项进行筛选。这种交互方式可以帮助用户快速定位到需要的选项。在这个代码实例中，我们定义了两个对象。
复制链接

扫一扫