easyui combobox 通过onchange实现联动

 

jsp

<td">类型:</td>

<td >
    <select class="easyui-combobox" id="type" style="width: 150px" editable="false" valueField="value" textField="text">
                                        <option  value="1">类型1</option>
                                        <option  value="2">类型2</option>
                                    </select>
                                </td>

<td>产品类型:</td>
  <td >
    <select class="easyui-combobox " id="name" style="width: 150px" data-options="valueField:'id',textField:'name',url:'${ctx}/TypeController/query.do?type=1',value:'1'" >
                                    </select>
                                </td>

js

$(function () {

        var _type = $('#type').combobox({
            onChange: function (newValue, oldValue) {
                _name.combobox({
                        url:'${ctx}/TypeController/query.do?type='+newValue,
                        valueField: 'id',
                        textField: 'name',
                        onLoadSuccess: function () {  //加载完成后,设置选中第一项  
                            var val = $(this).combobox("getData");  
                            for (var item in val[0]) {  
                                if (item == "id") {  
                                    $(this).combobox("select", val[0][item]);  
                                }  
                            }  
                        }  
                    }).combobox('clear');
            }
        });
        var _name = $('#name').combobox({
             valueField: 'id',
             textField: 'name'
         });
   

    });

进入页面之后看到的是类型1对应的产品类型的数据，选择类型2之后会看到产品类型的变换，依次类推。