Easyui多个下拉框联动效果

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

好久没写前端了，以前在做多级联动的时候，用的是easyui的tree结构，但是需要一次性全部加载，不是按需加载，性能不好，退而求其之，用多个下拉框做

eayui的combobox 有onSelect，onLoadSuccess等方法，具体可以看http://www.jeasyui.net/plugins/169.html文档API

1、html

2、js

$('#province').combobox({
valueField:'code',
textField:'name',
url:'../../area/getOne.do',
method:'get',
onSelect:function(rec){
var url1='../../area/getTwo.do?pid='+rec.code+'&tag='+(new Date().getTime());
$('#city').combobox('reload',url1);
},
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code);//前面设置的valueField属性名 }
});
$('#city').combobox({
valueField:'code',
textField:'name',
method:'get',
onSelect:function(rec){
var url1='../../area/getThree.do?pid='+rec.code+'&tag='+(new Date().getTime());
$('#county').combobox('reload',url1);
},
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code); }
});
$('#county').combobox({
valueField:'code',
textField:'name',
onLoadSuccess: function () { //加载完成后,设置选中第一项
var val = $(this).combobox('getData');
$(this).combobox('select', val[0].code); }
});