电商商家后台-easyUI的combox三级联动

 这几天在做项目中又用到了easyUI，以前做ITOO的时候前端都是被封装好的，而且也没有真正接触过三级联动效果。这个三级联动是要实现的是省市县联动。选择某一个省时跟着相应的市显示，接着相应的县显示。

    不仅是这样，因为做的是修改功能，所以不仅要把查出来的省，市，县显示出来，而且从数据库中查询来的地区需要成为默认显示值。也就是说从数据库中查出来的地区跟查出来的所有省市区做对比，是数据库中地区显示为默认。举个例子，数据库中存的是河北省廊坊市燕郊区，那么显示在界面上的默认值也必须是河北省廊坊市燕郊区。这也是在我实现中刚开始挺头疼的一件事，后来经过查询其实挺简单的。

首先我把从数据库中查询出来的地区，存放到界面上并隐藏起来，然后把从数据库中查询出来的所有省份显示到界面上。其次用JS代码获取隐藏的地区，并设置这些地区在下拉框中默认为选中。

    JSP代码：  

[html] view plain copy

1. <tr>  
2.    <td id="area">  
3.     <input id="shengyincang" style="display:none;" value="${sheng}"/>  
4.     <input id="shiyincang" style="display:none;" value="${shi}"/>  
5.     <input id="xianyincang" style="display:none;" value="${xian}"/>  
6.     所在地区:  
7.    </td>  
8.    <td><select id="sheng" class="easyui-combobox" name="sheng">  
9.         <c:forEach var="catage" items="${requestScope.shengList}" varStatus="status">  
10.     <option style=" width: 100px;" value="${catage.iD}">${catage.province_city}</option>  
11.     </c:forEach>  
12.     </select>  
13.      <input id="shi" class="easyui-combobox"  name="shi"/>  
14.      <input id="xian" class="easyui-combobox"  name="xian"/>  
15.      <span id="cityTip"></span>  
16.    </td>  
17. </tr>  

    JS代码：其实JS代码实现的很简单，因为EasyUI的封装功能真的是很强大啊。

[javascript] view plain copy

1. window.onload=function(){  
2.       
3.     //获取界面上隐藏的地区  
4.     var shengUID=$("#shengyincang").val();  
5.     var shiUID=$("#shiyincang").val();  
6.     var xianUID=$("#xianyincang").val();  
7.     //var opts=document.getElementById("sheng");  
8.     //设置地区被选中  
9.     $("#sheng").combobox('select',shengUID);  
10.     $("#shi").combobox('select',shiUID);  
11.     $("#xian").combobox('select',xianUID);  
12.           
13. }  
14.   
15. //三级联动事件，选择省份，相应所有市跟着出来，选中市相应的县跟着出来。  
16. $(function(){                                                            
17.         //触发省选项  
18.         $("#sheng").combobox({  
19.             onSelect:function(record){  
20.                 $("#shi").combobox("setValue",''); //清空市  
21.                 $("#xian").combobox("setValue",''); //清空县  
22.                 var shengid=$('#sheng').combobox('getValue');  
23.                   
24.                 $.ajax({  
25.                     async:false,  
26.                     url:"personalprofile_findshi.action",    
27.                     data:{shengid:shengid},  
28.                     type:"POST",  
29.                     dataType:"json",  
30.                     success:function(data){  
31.                         //alert(data);  
32.                         $("#shi").combobox("loadData",data);  
33.                     }  
34.                       
35.                 });  
36.             }  
37.               
38.         });  
39.         $('#shi').combobox({       
40.             editable:false, //不可编辑状态    
41.             cache: false,    
42.             panelHeight: '150',//自动高度适合    
43.             valueField:'iD',       
44.             textField:'province_city'    
45.            });   
46.   
47.         //触发市选项时  
48.         $("#shi").combobox({  
49.             onSelect:function(record){  
50.                 $("#xian").combobox("setValue",''); //清空县  
51.                 var shiid=$('#shi').combobox('getValue');  
52.                   
53.                 $.ajax({  
54.                     async : false,  
55.                     url:"personalprofile_findxian.action",  
56.                     cache:false,  
57.                     data:{shiid:shiid},  
58.                     type:"POST",  
59.                     dataType:"json",  
60.                     success:function(data){  
61.                         $("#xian").combobox("loadData",data);  
62.                     }  
63.                       
64.                 });  
65.             }  
66.         });  
67.           
68.           
69.         $('#xian').combobox({       
70.             editable:false, //不可编辑状态    
71.             cache: false,    
72.             panelHeight: '150',//自动高度适合    
73.             valueField:'iD',       
74.             textField:'province_city'    
75.            });   
76. });  

   最后上图：

    

    封装的固然好，但是尝试着去了解底层，因为只有掌握了底层，我们才能运筹帷幄。以前做ITOO的时候没觉得什么，后来做这个项目才发现ITOO封装的太好了，自己了解的太少了，以至于这个项目做起来有点儿生疏。