EasyUI combobox 三级联动

<script type="text/javascript">

  $(function(){
   loadqsfCombobox();
  });

function loadqsfCombobox(){
    $('#bigArea').combobox({
        url:'/ydmsy/actions/area_base/getDSFData.do?actionId=ydmsy_area_base_getDSFData',    
        prompt : '输入空格或关键字后自动搜索',
        valueField:'bigArea',    
        textField:'bigArea',
        filter: function(q, row){
            var opts = $(this).combobox('options');
            return row[opts.textField].indexOf(q) >-1;
        },
        onSelect:function(rec){
            $("#province").combobox('clear');
            var url = "/ydmsy/actions/area_base/getDSFData.do?actionId=ydmsy_area_base_getDSFData&bigArea=" + rec.bigArea;
            $("#province").combobox('reload', url);
        },
        loadFilter:function(oData){
            var data = oData.data;
            for(var i in data){
                data[i].bigArea = data[i].bigArea;
            }
            //data.unshift({"bigArea":"","bigArea":"请选择"});
            return data;
        }
    });
$(
'#province').combobox({ url:'', valueField:'provinceId', textField:'provinceName', filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) >-1; }, onSelect:function(rec){ $("#distribution").combobox('clear'); var url = "/ydmsy/actions/area_base/getDSFData.do?actionId=ydmsy_area_base_getDSFData&provinceId=" + rec.provinceId; $("#distribution").combobox('reload', url); }, loadFilter:function(oData){ var data = oData.data; //data.unshift({"provinceId":"","provinceName":"请选择"}); return data; } });
$(
'#distribution').combobox({ url:'', valueField:'bm', textField:'mc', filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) >-1; }, loadFilter:function(oData){ var data = oData.data; //data.unshift({"bm":"","mc":"请选择"}); return data; } }); }; </script>
<body>
<table>

<tr>
<td align="right">大区:</td>
<td>
<input type="text" id="bigArea" name="bigArea" class="easyui-combobox" style="width:220px;height:26px"/>
</td>
<td align="right">省:</td>
<td>
<input type="text" id="province" name="province" class="easyui-combobox" style="width:220px;height:26px"/>
</td>
<td align="right">分拨中心:</td>
<td>
<input type="text" id="distribution" name="distribution" class="easyui-combobox" style="width:220px;height:26px"/>
</td>
</tr> </table>

</body>

 

posted @ 2017-07-05 13:34  ____小菜鸟  阅读(2733)  评论(0编辑  收藏  举报