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之後會看到產品類型的變換，依次類推。