当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Layui下拉3级联动

Layui下拉3级联动

2019年12月08日  | 移动技术网IT编程  | 我要评论

这里我就不给大家详细说明了直接附图：

　　

js代码：

layui.use(['layer', 'form','xform','layer'], function () {
    var element = layui.element;
    var form = layui.form;
    var layer  = layui.layer;

    // 城市列表
    $.ajax({
        url:"/city/findbyid",
        type:"get",
        async: false,
        cache: false,
        contenttype: 'application/json',
        datatype: "json",
        success: function (json) {
            console.log(json);
            var citylisthtml='';
            for (var i=0; i<json.data.length; i++){
                citylisthtml+= '<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
            }
            $('#citylist').append(citylisthtml);
            form.render();

            // 区域列表
            form.on('select(citylist)', function(data){
                var citylistid = data.value;
                console.log(citylistid);
                if (citylistid != "nonull"){
                    document.getelementbyid('regionlist').innerhtml='';
                    document.getelementbyid('policelist').innerhtml='';
                    document.getelementbyid('community').innerhtml='';
                    $.ajax({
                        url:"/region/findbyid/"+citylistid,
                        type:"get",
                        async: false,
                        cache: false,
                        contenttype: 'application/json',
                        datatype: "json",
                        success: function (json) {
                            console.log(json);
                            document.getelementbyid('regionlist').innerhtml='';
                            var regionlisthtml='';
                            for (var i=0; i<json.data.length; i++){
                                regionlisthtml+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                            }
                            $('#regionlist').append(regionlisthtml);
                            form.render();

                            // 派出所列表
                            form.on('select(regionlist)', function(data){
                                var regionlistid = data.value;
                                document.getelementbyid('policelist').innerhtml='';
                                document.getelementbyid('community').innerhtml='';
                                $.ajax({
                                    url:"/localpolicestation/findbyid/"+regionlistid,
                                    type:"get",
                                    async: false,
                                    cache: true,
                                    contenttype: 'application/json',
                                    datatype: "json",
                                    success:function (json) {
                                        console.log(json);
                                        document.getelementbyid('policelist').innerhtml='';
                                        var policelisthtml='';
                                        for (var i=0; i<json.data.length; i++){
                                            policelisthtml+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                                        }
                                        $('#policelist').append(policelisthtml);
                                        form.render();

                                        // 社区列表
                                        form.on('select(policelist)', function(data){
                                            var policelistid = data.value;
                                            $.ajax({
                                                url:"/community/findbyid/"+policelistid,
                                                type:"get",
                                                async: false,
                                                cache: false,
                                                contenttype: 'application/json',
                                                datatype: "json",
                                                success:function (json) {
                                                    console.log(json);
                                                    document.getelementbyid('community').innerhtml='';
                                                    var communityhtml='';
                                                    for (var i=0; i<json.data.length; i++){
                                                        communityhtml+='<option value="'+json.data[i].id+'">'+json.data[i].name+'</option>'
                                                    }
                                                    $('#community').append(communityhtml);
                                                    form.render();
                                                }
                                            })
                                        })
                                    }
                                })
                            })
                        }
                    })

                }
                else {
                    document.getelementbyid('regionlist').innerhtml='';
                    document.getelementbyid('policelist').innerhtml='';
                    document.getelementbyid('community').innerhtml='';
                    form.render();
                }
            })
        }
    });
    form.render();
});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网