正文

省市二级联动效果原生JavaScript实现教程

/0 浏览量
1110

简介

省市二级联动是很多应用场景下常见的功能，例如用户填写地址时需要选择省市信息。使用原生JavaScript实现省市二级联动可以避免依赖第三方库，让项目更加轻量。本教程将带你一步步学会如何用原生JavaScript创建一个简单的省市二级联动效果。

准备工作

在开始之前，你需要确保以下条件满足：

  • 熟悉HTML、CSS和JavaScript的基本知识。
  • 准备一份包含所有省份数据和市份数据的JSON文件，例如：
[
    {
        "province": "浙江省",
        "cities": ["杭州市", "宁波市", "温州市"]
    },
    {
        "province": "江苏省",
        "cities": ["南京市", "苏州市", "无锡市"]
    }
    // 更多省份数据...
]

实现步骤

步骤一：HTML结构

首先，创建基本的HTML结构，包含省和市的下拉菜单。

<div id="address-picker">
    <select id="province"></select>
    <select id="city"></select>
</div>

步骤二：CSS样式

为了使联动菜单更加美观，你可以添加一些基本的CSS样式。

#address-picker select {
    margin: 10px;
    padding: 8px;
    font-size: 16px;
    width: 200px;
}

步骤三：JavaScript脚本

接下来，编写JavaScript代码来填充省和市的数据，并实现联动效果。

// 省份数据
const provincesData = [
    {
        "province": "浙江省",
        "cities": ["杭州市", "宁波市", "温州市"]
    },
    {
        "province": "江苏省",
        "cities": ["南京市", "苏州市", "无锡市"]
    }
    // 更多省份数据...
];

// 初始化省份下拉菜单
function initProvinces() {
    const provinceSelect = document.getElementById('province');
    provincesData.forEach((province, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = province.province;
        provinceSelect.appendChild(option);
    });
}

// 根据选中的省份填充城市下拉菜单
function fillCities() {
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const provinceIndex = provinceSelect.selectedIndex;
    const cities = provincesData[provinceIndex].cities;
    citySelect.innerHTML = ''; // 清空当前城市数据

    cities.forEach((city) => {
        const option = document.createElement('option');
        option.textContent = city;
        citySelect.appendChild(option);
    });
}

// 初始化事件监听
function initEventListeners() {
    const provinceSelect = document.getElementById('province');
    provinceSelect.addEventListener('change', fillCities);
}

// 初始化省市下拉菜单
function init() {
    initProvinces();
    initEventListeners();
}

// 页面加载完毕后执行
window.onload = init;

步骤四：测试效果

保存文件并打开浏览器查看效果，你应该能够看到省和市的下拉菜单，并能够在选择省份后，城市下拉菜单中自动填充相应的城市选项。

总结

通过以上步骤，你已经学会了如何使用原生JavaScript实现省市二级联动效果。这种方法不依赖任何外部库，代码简洁易懂，非常适合用于小型的Web项目。希望这个教程能够帮助你！

-- 展开阅读全文 --