jQuery实现三级联动菜单

jQuery实现三级联动菜单效果

思路：首先需要获取相对数据接口，我这里举例的城市接口，我准备在city.json文件中。然后使用jquery中的方法实现三级菜单联动。
js代码如下：

<script>
        ! function($) {
            let $show = $('#show'); //显示框
            let $prov = $('#prov'); //省份
            let $city = $('#city'); //城市
            let $country = $('#country'); //县区
            let $btn = $('#btnclick'); //按钮

            //首先禁用提交按钮
            $btn.prop('disabled', true);
            //:selected 匹配所有选中的option元素

            //获取数据接口
            $.getJSON('city.json', function(provice) {
                console.log(provice); //获取的接口数据
                //遍历渲染省份或者直辖市 34
                $.each(provice, function(index, value) {
                    $prov.append('+ index + '">' + value.name + '');
                });
                //利用对象存储当前省市区的索引
                let data = {
                        prov: '',
                        city: '',
                        country: ''
                    }
                    //省份或者直辖市发送改变，渲染对应的城市。
                $prov.on('change', function() {
                    let $provindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。
                    //存储索引进入上面对象
                    if (data.prov !== $provindex) { //判断不相等再进行存储。
                        data.prov = $provindex
                    }
                    //渲染之前先清除前面渲染的城市。
                    $('#city > option').first().nextAll().remove();
                    $('#country > option').first().nextAll().remove();

                    //解决选择完成之后，对省份改变
                    if ($prov.val() === '=请选择省份=') {
                        $('#city > option').first().nextAll().remove();
                        $show.val('');
                        $btn.prop('disabled', true);
                        return;
                    }
                    if ($provindex !== '') { //判断取值不能为空，渲染对应的城市    
                        let $cityname = provice[$provindex]['city']; //省份下面对应的城市名称，是数组。
                        $.each($cityname, function(index, value) {
                            $city.append('+ index + '">' + value.name + '');
                        });
                    }
                });
                //城市改变，渲染县区
                $city.on('change', function() {
                    let $cityindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。
                    //存储索引进入上面对象
                    if (data.city !== $cityindex) {
                        data.city = $cityindex
                    }
                    $('#country > option').first().nextAll().remove();
                    //解决选择完成之后，对城市改变
                    if ($city.val() === '=请选择城市=') {
                        $('#country > option').first().nextAll().remove();
                        $show.val('');
                        $btn.prop('disabled', true);
                        return;
                    }
                    if ($cityindex !== '') {
                        let $countryname = provice[data.prov]['city'][$cityindex].districtAndCounty; //结果是数组
                        $.each($countryname, function(index, value) {
                            $country.append('+ index + '">' + value + '');
                        });
                    }
                });

                //县区改变
                $country.on('change', function() {
                    let $countryindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。
                    if ($country.val() === '=请选择县区=') {
                        $show.val('');
                        $btn.prop('disabled', true);
                        return;
                    }
                    //存储索引进入上面对象
                    if (data.country !== $countryindex) {
                        data.country = $countryindex;
                    }
                    if (data.prov && data.city && data.country) {
                        $btn.prop('disabled', false);
                    }
                });
                //点击按钮，将值传递给show盒子
                $btn.on('click', function() {
                    $show.val(provice[data.prov].name + '-' + provice[data.prov]['city'][data.city].name + '-' + provice[data.prov]['city'][data.city].districtAndCounty[data.country]);
                });

            });




        }(jQuery);
    </script>
    

注：记得自己引入jQuery文件