easyui实现combobox二级联动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NothingToSay01/article/details/79893150

最近开始使用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'
        });
    <th>省份：</th>
                    <td><input id="provinceId" type="text" class="easyui-combobox" /></td>
                    <th>城市：</th>
                    <td><input id="cityId" type="text" class="easyui-combobox"/></td>
                    <th>区县：</th>

                    <td><input id="countyId" type="text" class="easyui-combobox" /></td>

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