省、市、区的三级联动比较经典,而且问题还在于修改省,那么市、区要跟着变,修改市,则区跟着变。
下面的代码定义三个combobox
<tr>
<td width="15%" style="text-align:right">注册区域:</td>
<td width="85%" colspan="3">
<input id="regProvince" name="regProvince" class="easyui-combobox" style="width:120px;" data-options="required:true, editable:false,prompt: '请选择省份',missingMessage:'请选择省份'" value="${oimSupplier.regProvince}" />
<input id="regCity" name="regCity" class="easyui-combobox" style="width:120px;" data-options="required:true, editable:false,prompt: '请选择城市',missingMessage:'请选择城市'" value="${oimSupplier.regCity}" />
<input id="regDistrict" name="regDistrict" class="easyui-combobox" style="width:120px;" data-options="required:true, editable:false,prompt: '请选择区县',missingMessage:'请选择区县'" value="${oimSupplier.regDistrict}" />
</td>
</tr>
以下代码是是初始化方法
$(function() {
initProvince();
initCity('${oimSupplier.regProvince}');
initDistrict('${oimSupplier.regCity}');
});
初始化省,主要看onselect方法,针对城市要clear清空数据,还得setvalue为空字符串,这样市的placeholder才有效,而区还要加上loadData为空数组,清理掉区下拉所有选项,因为市改变了,但是你没有选市,所以区应该没有任何选项。直到你选了市
function initProvince(){
$('#regProvince').combobox({
method:'get',
url:ccs_ctx+'ccs04/' + DICTIONARY_FIELD.ADMIN_REGION,
valueField:'id',
textField:'name',
onSelect:function(record){
initCity(record.id);
$('#regCity').combobox('clear');
$('#regCity').combobox('setValue','');
$('#regDistrict').combobox('clear');
$('#regDistrict').combobox('setValue','');
$('#regDistrict').combobox('loadData',[]);
}
});
}
function initCity(pid){
if ($.string.isNullOrEmpty(pid)){
pid = -1;
}
$('#regCity').combobox({
method:'get',
url:ccs_ctx+'ccs04/' + DICTIONARY_FIELD.ADMIN_REGION +'?pid='+pid,
valueField:'id',
textField:'name',
onSelect:function(record){
initDistrict(record.id);
$('#regDistrict').combobox('clear');
$('#regDistrict').combobox('setValue','');
}
});
}
function initDistrict(pid){
if ($.string.isNullOrEmpty(pid)){
pid = -1;
}
$('#regDistrict').combobox({
method:'get',
url:ccs_ctx+'ccs04/' + DICTIONARY_FIELD.ADMIN_REGION +'?pid='+pid,
valueField:'id',
textField:'name',
});
}