javajs原生态实现省市县级连

最新推荐文章于 2024-10-01 21:21:12 发布

数据蛙datafrog

最新推荐文章于 2024-10-01 21:21:12 发布

阅读量23

点赞数

文章标签： android

我整理的一些关于【CI】的项目学习资料（附讲解～～）和大家一起分享、学习一下：

https://edu.51cto.com/surl=iqhDF2

JavaScript 原生态实现省市县级联动

在Web开发中，省市县级联动是一个常见的需求。它可以帮助用户选择地址信息，提供更好的用户体验。本文将介绍如何使用纯JavaScript实现省、市、县的连动选择功能。

1. 项目准备

为了实现省市县级联动，我们需要以下几个基本要素：

HTML结构
JavaScript逻辑
JSON格式的数据源

首先，我们准备一个基础的HTML框架，包含三个下拉框来选择省、市和县。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市县级联动</title>
</head>
<body>
    省市县级联动示例
    <label for="province">省份：</label>
    <select id="province"></select>

    <label for="city">城市：</label>
    <select id="city"></select>

    <label for="county">县区：</label>
    <select id="county"></select>

    <script src="script.js"></script>
</body>
</html>

2. 数据源准备

接下来，我们使用JSON格式的数据来存储省市县的信息。以下是一个简单的示例数据：

{
    "北京市": {
        "市辖区": ["东城区", "西城区", "朝阳区"],
        "昌平区": [],
        "海淀区": []
    },
    "广东省": {
        "广州市": ["天河区", "越秀区"],
        "深圳市": ["福田区", "罗湖区"]
    }
}

我们将该数据保存在data.json文件中。

3. JavaScript 逻辑实现

现在，我们需要编写JavaScript代码以实现下拉框的联动。以下是主要功能的代码逻辑：

加载JSON数据。
动态填充省、市和县的下拉框。
实现联动效果。

我们将把上面的逻辑放入一个名为 script.js 的JavaScript文件中。

// script.js

const data = {
    "北京市": {
        "市辖区": ["东城区", "西城区", "朝阳区"],
        "昌平区": [],
        "海淀区": []
    },
    "广东省": {
        "广州市": ["天河区", "越秀区"],
        "深圳市": ["福田区", "罗湖区"]
    }
};

const provinceSelect = document.getElementById('province');
const citySelect = document.getElementById('city');
const countySelect = document.getElementById('county');

// 填充省份下拉框
for (let province in data) {
    const option = document.createElement('option');
    option.value = province;
    option.textContent = province;
    provinceSelect.appendChild(option);
}

// 省份变化事件
provinceSelect.addEventListener('change', function () {
    const cities = data[this.value];
    citySelect.innerHTML = ''; // 清空城市下拉框
    countySelect.innerHTML = ''; // 清空县区下拉框

    for (let city in cities) {
        const option = document.createElement('option');
        option.value = city;
        option.textContent = city;
        citySelect.appendChild(option);
    }
});

// 城市变化事件
citySelect.addEventListener('change', function () {
    const counties = data[provinceSelect.value][this.value];
    countySelect.innerHTML = ''; // 清空县区下拉框

    counties.forEach(county => {
        const option = document.createElement('option');
        option.value = county;
        option.textContent = county;
        countySelect.appendChild(option);
    });
});