（前端）联动查询的两种实现方式

0x00 前言

开发的时候，经常遇到需要联动查询的需求，比如省市区三级联动，选择省份后select列表加载对应的市，而后加载市对应的区。这里介绍我用的两种实现方式。

0x01 页面加载时获取所有查询数据

此处参考
链接: https://blog.csdn.net/qq_45850095/article/details/116054345?spm=1001.2101.3001.6650.5&depth_1-utm_relevant_index=6
首先在html里创建下拉框

<select name="" id="province">
        <option value="">---请选择---</option>
    </select>
    <select name="" id="city">
        <option value="">---请选择---</option>
    </select>
    <select name="" id="district">
        <option value="">---请选择---</option>
    </select>

而后在JS中分别获取这三个框

    $(function () {
        // 分别获取三个下拉框，并一次加载所有查询数据
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var district = document.getElementById("district");
        var frag = document.createDocumentFragment();
        var provinceData = <?php echo json_encode($province,JSON_UNESCAPED_UNICODE); ?>;
        var cityData = <?php echo json_encode($city,JSON_UNESCAPED_UNICODE); ?>;
        var districtData = <?php echo json_encode($district,JSON_UNESCAPED_UNICODE); ?>;

通过appendChild加载数据

for (var key in provinceData) {
           var option = document.createElement("option");
           option.innerHTML = provinceData[key].name;
           option.value = provinceData[key].id;
           frag.appendChild(option);
       }
       province.appendChild(frag);

通过onchange触发加载对应市的数据

province.onchange = function () {
           // 存放市级数据
           var cityArr = [];
           //清空市级与区级中的数据，防止重复
           city.innerHTML = "<option value=\"\">---请选择---</option>"
           district.innerHTML = "<option value=\"\">---请选择---</option>"
           for (var key in cityData){
           //取出pid与省id相同的市
           		if(cityData[key].pid == this.value){
	            cityArr.push(cityData[key]);
	            }
	       }

通过appendChild加载市的数据

for (key in cityArr) {
               var option = document.createElement("option");
               option.innerHTML = cityArr[key].name;
               option.value = cityArr[key].id;
               frag.appendChild(option);
           }
           city.appendChild(frag);

而后操作与省相同，直至取到区的数据

0x02 联动查询时动态请求获取数据

首先取出省的数据，写在select里，并增加onchange='getCity(this)'属性
而后通过Ajax异步请求加载对应市的数据

 function getCity(province){
        var provinceid = $(province).val();
        var url = ********;
        $.ajax({
            url:url,
            type:'get',
            //通过省的id找到对应的市
            data:{
                pid:provinceid,
                lv:2
            },
            dataType:'json',
            success:function (data){
                var list=data.data;
                //通过.showcidy找到市级select框
                $('.showcity').html('');
                $('.showcity').append(new Option('',''));
                for(var key in list){
                    $('.showcity').append(new Option(list[key],key));
                }
                //更新select框
                $('.showcity').trigger("chosen:updated");
                //初始化区县
                $('.showdistrict').html('');
                $('.showdistrict').append(new Option('',''));
                $('.showdistrict').trigger("chosen:updated");

            }
        })
    }

区级操作同理

0x03 关于chosen

chosen是jQuery的美化插件，当select选项过长时，找到对应的选项就非常麻烦，chosen可以使select框带输入搜索功能，通过输入搜索找到对应选项。
需要注意的是，当选项数据加载完成后，要用$('.showcity').trigger("chosen:updated");来更新select，不然加载的选项不会显示。
更多chosen用法参考：
链接: http://wjhsh.net/jacksplwxy-p-11753254.htm
链接: https://www.jianshu.com/p/51863ae82723