JQ三级联动的写法

今天和大家分享下三级联动的写法

思路：1.通过AJAX获取到json文件里的数据,GET方法

　　　 2.在获取到的数据里找到省份添加到下拉菜单中

　　　 3.当省份标签被改变时change事件通过当前省份与市的共同数组下标找到对应的市区；

实例：HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-3.3.1.js"></script>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="province">//创建省份下拉菜单
            <option>--省份--</option>
        </select>
        <select id="city">//创建市下拉菜单
            <option>--市--</option>
        </select>
        <select id="code">//创建邮编下拉菜单
            <option>--邮编--</option>
        </select>
    </body>
</html>

　　JQ 第一级联动省份

<script>
        //----------------------------联动第一级-------------------------------------------------------
        $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据
            $(data.城市代码).each(function(i,el){      //通过JQ循环遍历数据
                var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中
                $("#province").append(str);//添加option标签
            })
        })
    </script>

　　第二级联动市区：当省级下拉菜单被改变时触发change事件实现二级联动

<script>
        $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据
            var provinceId = null;//纪录共同的数组下标值
        //----------------------------联动第一级-------------------------------------------------------
            $(data.城市代码).each(function(i,el){      //通过JQ循环遍历数据
                var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中
                $("#province").append(str);//添加option标签
            });
        //----------------------------联动第二级-------------------------------------------------------    
            $("#province").change(function(){//当省级下拉菜单被改变触发change事件
                $("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单
                $("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单
                provinceId = $("#province").val();//获取到省和市的共同数组下标
                $(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市
                    var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中
                    $("#city").append(str);//添加option标签
                })
            });
        </script>

　　第三级联动邮编：当市级级下拉菜单被改变时触发change事件实现三级联动

<script>
        $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据
            var provinceId = null;//纪录共同的数组下标值
        //----------------------------联动第一级-------------------------------------------------------
            $(data.城市代码).each(function(i,el){      //通过JQ循环遍历数据
                var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中
                $("#province").append(str);//添加option标签
            });
        //----------------------------联动第二级-------------------------------------------------------    
            $("#province").change(function(){//当省级下拉菜单被改变触发change事件
                $("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单
                $("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单
                provinceId = $("#province").val();//获取到省和市的共同数组下标
                $(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市
                    var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中
                    $("#city").append(str);//添加option标签
                })
            });
            //----------------------------联动第三级-------------------------------------------------------    
            $("#city").change(function(){
                $("#code").html("");
                $(data.城市代码[provinceId].市).each(function(index,ele){
                    if($("#city").val()==ele.市名){
                        console.log(ele.编码);
                        var str = "<option>" + ele.编码 + "</option>"//把data的省份数据添加到下拉菜单中
                        $("#code").append(str);//添加option标签
                    }
                })
            })
        })
    </script>

JQ三级联动的写法

猜你喜欢