EasyUI Combobox 三级联动设计
1、实现功能
三个combobox实现联动,并且在修改的时候,能实现默认选中。
2、代码片段展示
<tr>
<td>A:</td>
<td>
<input class="easyui-combobox" id="workshop" name="workshop" data-options="
required:true,
url:'/myui/getAllA.action',
valueField:'opValue',
textField:'opName',
onSelect:function(rec){
$('#workarea').combobox('clear');
$('#workarea').combobox('reload','/myui/getAllBByAId.action?aId='+rec.opValue);
},onLoadSuccess:function(){
$('#workshop').combobox('select', '${object.workshop}');
},
editable:false"/>
</td>
</tr>
<tr>
<td>B:</td>
<td>
<input class="easyui-combobox" id="workarea" name="workarea" data-options="
required:true,
valueField:'opValue',
textField:'opName',
onSelect:function(rec){
$('#station').combobox('clear');
$('#station').combobox('reload','/myui/getCByBId.action?bId='+rec.opValue);
},onLoadSuccess:function(){
$('#workarea').combobox('select','${object.workarea}');
},
editable:false
"/>
</td>
</tr>
<tr>
<td>C:</td>
<td>
<input class="easyui-combobox" id="station" name="station" data-options="
required:true,
valueField:'opValue',
textField:'opName',
onLoadSuccess:function(){
$('#station').combobox('select','${object.station}');
},
editable:false
">
</td>
</tr>
3、代码解释
功能十分简单,项目中opValue与opName是后台传过来的json数据;
onSelect 是combobox提供的事件,选中后,执行联动;
onLoadSuccess 是combobox 提供的事件,为combobox成功加载后的事件方法,此方法实现修改时的默认选中;

浙公网安备 33010602011771号