easyUI中的combobox联动

我在做项目时，经常用到easyUI框架，今天总结一下easyUI中的combobox吧~
创建easyui-combobox的方法，在easyUI的官网都有：
1、从带有预定义结构的 元素创建组合框（combobox）

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
    <option value="aa">aitem1</option>
    <option>bitem2</option>
    <option>bitem3</option>
    <option>ditem4</option>
    <option>eitem5</option>
</select>

2、从 标记创建组合框（combobox）

<input id="cc" class="easyui-combobox" name="dept"
    data-options="valueField:'id',textField:'text',url:'get_data.php'">

3、使用 javascript 创建组合框（combobox）

<input id="cc" name="dept" value="aa">

$('#cc').combobox({
    url:'combobox_data.json',
    valueField:'id',
    textField:'text'
});

json 数据格式的示例：

[{
    "id":1,
    "text":"text1"
},{
    "id":2,
    "text":"text2"
},{
    "id":3,
    "text":"text3",
    "selected":true
},{
    "id":4,
    "text":"text4"
},{
    "id":5,
    "text":"text5"
}]

它的属性和方法就不在赘述了，可以上官网查看。
下面来说一下关于两个combobox发联动

//初始化下拉列表
function InitCombobox() {
    $("#combobox_one").combobox({
        onLoadSuccess: function(){
            var types = $("#combobox_one").combobox('getData');
            if (types.length > 0){ 
                $("#combobox_one").combobox('select', types[0].Value);  //全部
            }
        }
    });
    $("#combobox_two").combobox({ 
        url:'...';
        onLoadSuccess: function(){ 
            var types = $("#combobox_one").combobox('getData');
            if (types.length > 0){ 
                $("#combobox_two").combobox('select', types[0].Value);  //全部
            }
        },
        onSelect: function(record){ 
            var url = '...' + record.Value;
            $("#combobox_one").combobox('reload', url);
        }
    });

$(function() {
    var typeData = [{
        text: "来源",
        value: "prodName"
    }, {
        text: "排放",
        value: "ars"
    }];
    var options01 = [{
        text: "生活污水",
        value: "eq"
    }, {
        text: "工业用水",
        value: "ne"
    }];
    var options02 = [{
        text: "工业用水",
        value: "ne"
    }, {
        text: "生活垃圾",
        value: "ge"
    }];
    //初始化查询项目的下拉列表
    $("#type").combobox({
        valueField: 'value',//值字段
        textField: 'text',//显示的字段
        data: typeData,
        panelHeight: 170,
        onSelect: function() {
            var myOptValue = $("#type").combobox("getValue");
            //1.清空原来的classify这个combobox中的选项
            $("#classify").combobox("clear");
            //2.动态添加"操作类型"的下拉列表框的option                            
            if (myOptValue != null && (myOptValue == 'prodName' || myOptValue == 'prodStatus')) {
                console.info("myOptValue = " + myOptValue);
                $("#classify").combobox({
                    panelHeight: 50,
                    data: options01
                });
            } else {
                $("#classify").combobox({
                    panelHeight: 140,
                    data: options02
                });
            }
            //3.清空文本输入框——用户输入的条件                            
            //$("#userInputCondition").val("");
        }
    });
    //初始化classify的下拉列表
    $("#classify").combobox({
        valueField: 'value',
        textField: 'text',
        data: options02,
        panelHeight: 140,
    });
});

下面是一个关于省市区的联动：

var h = $(window).height() * 0.65;
// 省级 
$('#province').combobox({
    valueField: 'name', //值字段
    textField: 'name', //显示的字段
    url: '/TidewaySHPServer/area/findAllProvince',//url为java后台查询省级列表的方法地址
    panelHeight: h,
    editable: true,
    //模糊查询
    filter: function(q, row) {
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0; //从头匹配,改成>=即可在任意地方匹配
    },
    onSelect: function(rec) {
        $('#city').combobox('setValue', "");
        $('#county').combobox('setValue', "");
        var url = '/TidewaySHPServer/area/findAllCity?parentId=' + rec.areaId;//url为java后台查询事级列表的方法地址
        $('#city').combobox('reload', url);
    }
});
//市区 
$('#city').combobox({
    valueField: 'name', //值字段
    textField: 'name', //显示的字段              
    panelHeight: 'auto',
    editable: false, //不可编辑，只能选择
    value: '',
    onSelect: function(rec) {
        $('#county').combobox('setValue', "");
        var url = '/TidewaySHPServer/area/findAllDistrictOrCounty?parentId=' + rec.areaId;//url为java后台查询区县级列表的方法地址
        $('#county').combobox('reload', url);
    }
});
//区 县
$('#county').combobox({
    valueField: 'areaId',
    textField: 'name',
    panelHeight: 'auto',
    editable: false,
});

基本上想写的都写完了，主要是多个combobox的联动效果，写的不完美大家相互学习一下啦~不对的地方麻烦指粗来哟~

关于combobox的模糊查询，检索中文时，输入中文之后需要敲一下键盘才进行检索，解决办法：在 jquery.easyui.min.js 中将 combo 中的 keydown 改为 keyup 就可以了：

$.fn.combo.defaults = $.extend({}, $.fn.textbox.defaults, {
        inputEvents : {
            click : _91b,
//          keydown : _91f,
            keyup : _91f,
            paste : _91f,
            drop : _91f
        },
        panelWidth : null,
        panelHeight : 200,
        panelMinWidth : null,
        panelMaxWidth : null,
        panelMinHeight : null,
        panelMaxHeight : null,
        panelAlign : "left",
        multiple : false,
        selectOnNavigation : true,
        separator : ",",
        hasDownArrow : true,
        delay : 200,
        keyHandler : {
            up : function(e) {
            },
            down : function(e) {
            },
            left : function(e) {
            },
            right : function(e) {
            },
            enter : function(e) {
            },
            query : function(q, e) {
            }
        },
        onShowPanel : function() {
        },
        onHidePanel : function() {
        },
        onChange : function(_94c, _94d) {
        }
    });

我直接把keydown注释掉了，改成了keyup