前端jquery技术城市三级联动

ts_shinian_web

已于 2023-02-09 14:59:35 修改

阅读量446

点赞数 1

于 2021-09-06 18:15:30 首次发布

本文链接：https://blog.csdn.net/weixin_53445649/article/details/120141451

版权

javascript 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

##使用基于前端技术技术的jquery实现省市区三级联动

1. 首先在网上找到一个可用的全国地区的js或json文件，这里我用的是js，文件的链接在这：

https://pan.xunlei.com/s/VMiuSCmSOuIfNQQIcoRsBcBPA1，提取码：hhhy

2. 定义三个select标签，引入js文件

<head>
    <meta charset="utf-8">
    <title>中国三级联动</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="area_chs.js"></script>
</head>
<body>
    <select id="province"></select>
    <select id="city"></select>
    <select id="area"></select>
    <button id="btn" onclick='f()'>提交</button>
</body>

3.初始化，使用let定义几个变量

    let province = '';
    let provinceIndex = 0;
    let city = '';
    let cityIndex = 0;
    let area = ''

4.select初始化，使用map方法

    _areaList.map((item, index) => {
        $("#province").append(`<option value=${item.name} index=${index}>${item.name}</option>`);
    })
    _areaList[provinceIndex].city.map((item, index) => {
        $("#city").append(`<option value=${item.name} index=${index}>${item.name}</option>`);
    })
    city = $('#city').val();
    $("#area").empty()
    _areaList[provinceIndex].city[cityIndex].area.map((item, index) => {
        $("#area").append(`<option value=${item}>${item}</option>`);
    })
    area = $('#area').val();

5.当下拉发生改变时，对应的变量值也发送改变

    $('#province').change(function () {
        province = $('#province').val();
        provinceIndex = $('#province')[0].selectedIndex;
        init()
    })
    $('#city').change(function () {
        city = $('#city').val();
        cityIndex = $('#city')[0].selectedIndex;
        setArea(provinceIndex, cityIndex);
    })
    $('#area').change(function () {
        area = $('#area').val()
    })

6.最后使用形式如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>中国三级联动</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="area_chs.js"></script>
</head>

<body>
    <select id="province"></select>
    <select id="city"></select>
    <select id="area"></select>
    <button id="btn" onclick='f()'>提交</button>
</body>
<script type="text/javascript">
    let province = '';
    let provinceIndex = 0;
    let city = '';
    let cityIndex = 0;
    let area = ''
    _areaList.map((item, index) => {
        $("#province").append(`<option value=${item.name} index=${index}>${item.name}</option>`);
    })

    // 当选择发生改变时记录值
    $('#province').change(function () {
        province = $('#province').val();
        provinceIndex = $('#province')[0].selectedIndex;
        init()
    })
    $('#city').change(function () {
        city = $('#city').val();
        cityIndex = $('#city')[0].selectedIndex;
        setArea(provinceIndex, cityIndex);
    })
    $('#area').change(function () {
        area = $('#area').val()
    })

    // 根据省份设置市区的下拉
    function setCity(provinceIndex) {
        $("#city").empty()
        _areaList[provinceIndex].city.map((item, index) => {
            $("#city").append(`<option value=${item.name} index=${index}>${item.name}</option>`);
        })
        city = $('#city').val();
    }
    // 根据市区设置区的下拉
    function setArea(provinceIndex, cityIndex) {
        $("#area").empty()
        _areaList[provinceIndex].city[cityIndex].area.map((item, index) => {
            $("#area").append(`<option value=${item}>${item}</option>`);
        })
        area = $('#area').val();
    }

    // 根据省份初始化
    function init() {
        cityIndex = 0;
        setCity(provinceIndex);
        setArea(provinceIndex, cityIndex);
        province = $('#province').val();
    }
    init()

    function f() {
        console.log(province + city + area);
    }
</script>

</html>

ts_shinian_web

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端jquery技术城市三级联动

##使用基于前端技术技术的jquery实现省市区三级联动1. 首先在网上找到一个可用的全国地区的js或json文件，这里我用的是js，文件的链接在这：https://pan.xunlei.com/s/VMiuSCmSOuIfNQQIcoRsBcBPA1，提取码：hhhy2. 定义三个select标签，引入js文件<head> <meta charset="utf-8"> <title>中国三级联动</title> <scri
复制链接

扫一扫