【EasyUI】Combobox的联动和onChange/onSelect事件绑定

【效果图】

(1)当选择“产品名称”这个查询项目时，运算条件只有“等于”和“不等于”，如下图所示。

(2)当用户选择可以进行数值计算的查询项目时，运算条件就会有很多，如下图所示。

【实现代码】

1、HTML代码

<table cellpadding="0" cellspacing="1" border="0">
    <tr>
        <td>选择查询项目：</td>
        <td><input id="queryItem" name="queryItem" class="easyui-combobox" style="width:130px;" ></td>
        <!-- 用户选择运算条件 -->
        <td><input id="operType" name="operType" class="easyui-combobox" style="width:90px;" data-options="panelHeight:150"/></td>
        <!-- 用户输入文本条件 -->
        <td><input id="userInputCondition" name="userInputCondition" type="text" style="width:200px;"></input></td>
    </tr>
</table>

2、JSP代码

注意，代码要写在“$(function(){})”中，这样页面被加载时，就可以绑定“查询项目”这个组件的事件。

$( function(){
    var queryItemData = [{text : "产品名称", value : "prodName"},
                         {text : "年化收益率", value : "ars"},
                         {text : "到期收益率", value : "ytm"},
                         {text : "最低出借金额", value : "lowLendEdu"},
                         {text : "最高出借金额", value : "higLendEdu"},
                         {text : "出借周期", value : "lendingCycle"},
                         {text : "产品状态", value : "prodStatus"}];

    var options01 = [{text : "等于", value : "eq"},
                     {text : "不等于", value : "ne"}];

    var options02 = [{text : "等于", value : "eq"},
                     {text : "大于且等于", value : "ge"},
                     {text : "大于", value : "gt"},
                     {text : "小于且等于", value : "le"},
                     {text : "小于", value : "lt"},
                     {text : "不等于", value : "ne"}];                                                             

     //初始化查询项目的下拉列表
     $("#queryItem").combobox({
         valueField: ‘value‘,
         textField: ‘text‘,
         data : queryItemData,
         panelHeight:170,
        //注册Easy-UI, combobox的onSeclete事件
        //目的：实现理财产品中，高级查询的“运算条件”随着“查询项目”的改变而发生联动。
        onSelect : function(){
                var myOptValue = $("#queryItem").combobox("getValue") ;

                //1.清空原来的operType这个combobox中的选项
                $("#operType").combobox("clear");

                //2.动态添加"操作类型"的下拉列表框的option
                if( myOptValue != null && (myOptValue == ‘prodName‘ || myOptValue == ‘prodStatus‘) ){
                    console.info("myOptValue = "+myOptValue);
                    $("#operType").combobox({
                        panelHeight:50,
                        data : options01
                    });
                }else{
                    $("#operType").combobox({
                        panelHeight:140,
                        data : options02
                    });
                }

                //3.清空文本输入框——用户输入的条件
                $("#userInputCondition").val("");
            }
     });                    

     //初始化operType的下拉列表
     $("#operType").combobox({
         valueField: ‘value‘,
         textField: ‘text‘,
         data : options02,
         panelHeight:140,
     });
});
});

3、EasyUI，comobox绑定onChange事件的链接:http://www.stepday.com/topic/?235