好久沒寫前端了，以前在做多級聯動的時候，用的是easyui的tree結構，但是需要一次性全部加載，不是按需加載，性能不好，退而求其之，用多個下拉框做

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

1、html

<table style="padding:10px 20px 10px 40px;">
            <tr>
                <td>省級:</td>
                <
 
td>
                    <input id="province" name="province" class="easyui-combobox"/>
                </td>
                <td>市級:</td>
                <td>
                    <input id="city" class="easyui-combobox"/>
                </td>
                <
 
td>區級:</td>
                <td>
                    <input id="county" class="easyui-combobox"/>
                </td>
               </tr>
          </table> 

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‘);
             for(var item in val[0]) {
                  $(this).combobox(‘select‘, val[0][item]);
             }
         }
    });
$(‘#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‘);
          for(var item in val[0]) {
              $(this).combobox(‘select‘, val[0][item]);
          }
        }
    });
    $(‘#county‘).combobox({
         valueField:‘code‘,
          textField:‘name‘,
          onLoadSuccess: function () {  //加載完成後,設置選中第一項
           var val = $(this).combobox(‘getData‘);
           for(var item in val[0]) {
                $(this).combobox(‘select‘, val[0][item]);
           }
         }
    });

3、效果圖

當選擇第一個下拉框時，會聯動後面2個下拉框，用的就是onselect方法；

而初始化選擇效果，使用的是onLoadSuccess,設置默認第一個值顯示

Easyui多個下拉框聯動效果