前端jquery技术城市三级联动

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

1. 首先在网上找到一个可用的全国地区的js或json文件，这里我用的是js，文件的链接在这：https://pan.xunlei.com/s/VMiuSCmSOuIfNQQIcoRsBcBPA1，提取码：hhhy

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

    
    
    
    


    
    
    
    提交

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

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

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

    _areaList.map((item, index) => {
        $("#province").append(`${item.name}`);
    })
    _areaList[provinceIndex].city.map((item, index) => {
        $("#city").append(`${item.name}`);
    })
    city = $('#city').val();
    $("#area").empty()
    _areaList[provinceIndex].city[cityIndex].area.map((item, index) => {
        $("#area").append(`${item}`);
    })
    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.最后使用形式如下：

    
    
    
    



    
    
    
    提交