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

时间:2023-03-09 17:16:06
CAT XQX --- 省市三级级联实现说明

最终效果:

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

满足要求,

上代码 :

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 的实现:

  $(function(){
var province = $('#area1').combobox({
valueField:'AREA_ID',
textField:'AREA_NAME',
editable:false,
url:'/base/area/getList',
onLoadSuccess : onLoadSuccess,
onChange:function(newValue, oldValue){
$.get('/base/area/getList',{parent_id:newValue},function(data){
city.combobox("clear").combobox('loadData',data);
county.combobox("clear")
},'json');
}
}); var city = $('#area2').combobox({
valueField:'AREA_ID',
textField:'AREA_NAME',
editable:false,
onLoadSuccess :onLoadSuccess,
onChange:function(newValue, oldValue){
$.get('/base/area/getList',{parent_id:newValue},function(data){
county.combobox("clear").combobox('loadData',data);
},'json');
}
}); var county = $('#area3').combobox({
valueField:'AREA_ID',
textField:'AREA_NAME',
onLoadSuccess :onLoadSuccess,
editable:false
});
}); function onLoadSuccess(){
var target = $(this);
var data = target.combobox("getData");
var options = target.combobox("options");
if(data && data.length>0){
var fs = data[0];
target.combobox("setValue",fs[options.valueField]);
}
}

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