CAT XQX --- 省市三级级联实现说明

最终效果：

 

满足要求，

 

上代码 ：

1.   需要调用这个控件 的地方：添加引用，因为里面写着逻辑呢。。。。。

1 <script type="text/javascript" src="/js/area.js"></script>

 

2.  需要调用这个控件的 地方添加如下代码： 因为现在是 三级，多级级联也是可以实现的，只需要，，，，，小改动。。下面的 id  暂时不能动，因为js 中使用了他，不过name 你随便。。。

<input id="area1" name="area1">
<input id="area2" name="area2">
<input id="area3" name="area3">

 

如果你能看到这个博客，说明你能得到项目源码。。。。。。所以这两块 就够你  使用的了。

 

 

3。 后台逻辑 跟俺 上一篇  : 一样，链接如下

 

http://www.cnblogs.com/zyy258963/p/4132717.html

 

4.  贴出 js 的实现：

 1  $(function(){
 2   var province = $('#area1').combobox({
 3       valueField:'AREA_ID',
 4       textField:'AREA_NAME',
 5       editable:false,
 6       url:'/base/area/getList',
 7       onLoadSuccess : onLoadSuccess,
 8       onChange:function(newValue, oldValue){
 9           $.get('/base/area/getList',{parent_id:newValue},function(data){
10               city.combobox("clear").combobox('loadData',data);
11               county.combobox("clear")
12           },'json');
13       }
14   });
15   
16   var city = $('#area2').combobox({
17       valueField:'AREA_ID',
18       textField:'AREA_NAME',
19       editable:false,
20       onLoadSuccess :onLoadSuccess,
21       onChange:function(newValue, oldValue){
22           $.get('/base/area/getList',{parent_id:newValue},function(data){
23               county.combobox("clear").combobox('loadData',data);
24           },'json');
25       }
26   });
27   
28   var county = $('#area3').combobox({
29       valueField:'AREA_ID',
30       textField:'AREA_NAME',
31       onLoadSuccess :onLoadSuccess,
32       editable:false
33   });
34 });
35 
36 function onLoadSuccess(){
37     var target = $(this);
38     var data = target.combobox("getData");
39     var options = target.combobox("options");
40     if(data && data.length>0){
41         var fs = data[0];
42         target.combobox("setValue",fs[options.valueField]);
43     }
44 }

 

有啥不明白的。。。。。。百度？？？  

 

转载于:https://www.cnblogs.com/zyy258963/p/4132727.html