最终效果:
满足要求,
上代码 :
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 }
有啥不明白的。。。。。。百度???