easyui实现combobox二级联动

最近开始使用jquery+easyui实现combobox的二级联动,实现的是省市区三级联动,以下所用的方法适用于三级,以及更多级次的联动。下面进入正题。

三级联动主要是选中一级目标之后,加载二级数据。easyui主要使用combobox的onHidePanel属性,当下拉列表隐藏时触发。

下面上代码:

        $.ajax({
            url:-------",
            dataType:"json",
            type:"POST",
            success:function(data){
                $('#provinceId').combobox({
                    data:data,
                    editable:false, //不可编辑状态
                    cache: false,
                    panelHeight: '150',
                    valueField:'id',
                    textField: 'name',
                    onHidePanel: function(){
                        $("#cityId").combobox("setValue",'');
                        $("#countyName").combobox("setValue",'');
                        var id = $('#provinceId').combobox('getValue');
                        $.ajax({
                            type: "POST",
                            url: 'xxxxxx',
                            cache: false,
                            dataType : "json",
                            data:{provinceId:id},
                            success: function(data){
                                $('#cityId').combobox({
                                    data:data,
                                    editable:false, //不可编辑状态
                                    cache: false,
                                    panelHeight: '150',
                                    valueField:'id',
                                    textField: 'name',
                                    onHidePanel: function(){
                                        $("#countyName").combobox("setValue",'');
                                        var id = $('#cityId').combobox('getValue');
                                        $.ajax({
                                            type: "POST",
                                            url: 'xxxxxxxx',
                                            cache: false,
                                            dataType : "json",
                                            data:{cityId:id},
                                            success: function(data){
                                                $("#countyName").combobox("loadData",data);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    }
                });
            }
        });
        $('#countyName').combobox({
            editable:false, //不可编辑状态
            cache: false,
            panelHeight: '150',//自动高度适合
            valueField:'id',
            textField:'name'
        });
    省份:
                   
                    城市:
                   
                    区县:

                   

使用easyUI中有很多不熟悉的地方,多看文档,基本的实现方式在文档中都有,在这里做一个记录,以便于日后的学习和使用。欢迎大家一起交流学习,共同进步!

你可能感兴趣的:(jquery)