easyui中的combogrid插件级联筛选
$("#selclass1").combogrid({ onChange: function (c1) { $("#selclass2").combogrid({ disabled: false, columns: [[ { field: 'id', title: '编号', width: "80px" }, { field: 'text', title: '名称', width: "120x" }, { field: 'miaoshu', title: '描述' } ]], loadFilter: function (data) { var data1 = []; for (var i in data) { //注意条件项的变化,-1 代表未匹配 if (c1.indexOf(data[i].parentid) > -1) { data1.push(data[i]); } } return data1; } }); } });
<div style="margin-bottom:10px"> <select id="selclass1" name="c1_id" required="required" class="easyui-combogrid" style="width:100%" data-options=" panelWidth: 500, idField: 'id', textField: 'text', url: 'ajax/class1list.json', method: 'get', rownumbers:true, columns: [[ {field:'id',title:'编号',width:80}, {field:'text',title:'名称',width:120}, {field:'miaoshu',title:'描述'} ]], fitColumns: true, label: '选择大分类:', labelPosition: 'top' "> </select> </div> <div style="margin-bottom:10px"> <select id="selclass2" name="c2_id" class="easyui-combogrid" style="width:100%" data-options=" panelWidth: 500, idField: 'id', textField: 'text', url: 'ajax/class2list.json', method: 'get', disabled: true, rownumbers:true, fitColumns: true, label: '选择小分类:', labelPosition: 'top' "> </select> </div>