最终效果:

满足要求,

上代码 :

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]);
}
}

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

CAT XQX --- 省市三级级联实现说明的更多相关文章

  1. [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果

    [C#]使用 C# 代码实现拓扑排序   目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...

  2. 夜深了,写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  3. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  4. 对jQuery ajax三级级联的简单研究

    最近写程序的时候经常遇到使用ajax获取数据的问题,刚好昨天遇到ajax写三级级联问题,自己写了一个简单的级联.对于服务端获取数据的就不多写了,客户端的ajax发送请求我在这里详细说一下,因为我也没专 ...

  5. [moka同学笔记]Yii下国家省市三级联动

    第一次做省市三级联动时候遇到了坑,感觉还是自己太菜.头疼了很久研究了很久,最后终于发现了问题.大致总结一下思路 在控制器中实例化model,然后在视图中渲染所有国家,当选取国家时候,ajax通过 id ...

  6. zTree实现地市县三级级联DAO接口实现

    zTree实现地市县三级级联DAO接口实现 ProvinceDaoImpl.java: /** * @Title:ProvinceDaoImpl.java * @Package:com.gwtjs.d ...

  7. zTree实现地市县三级级联报错(一)

    zTree实现地市县三级级联 1.详细报错例如以下: java.lang.IllegalStateException: Failed to load ApplicationContext at org ...

  8. 关于时间的操作(JavaScript版)——年月日三级级联(默认依次显示请选择年、请选择月和请选择日)

    这篇博客和前一篇博客基本同样,仅仅是显示的默认值不同: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&quo ...

  9. zTree实现地市县三级级联Action类

    zTree实现地市县三级级联Action类 ProvinceAction.java: /** * @Title:ProvinceAction.java * @Package:com.gwtjs.str ...

随机推荐

  1. Java Map排序

    Map排序的方式有很多种,这里记录下自己总结的两种比较常用的方式:按键排序(sort by key), 按值排序(sort by value). 1.按键排序 jdk内置的java.util包下的Tr ...

  2. java Process的waitFor()

    java Process的waitFor() 在编写Java程序时,有时候我们需要调用其他的诸如exe,shell这样的程序或脚本.在Java中提供了两种方法来启动其他程序: (1) 使用Runtim ...

  3. Jquery正则表达式公式.例子

    1.非负整数         /^\d+$/     2.正整数           /^[0-9]*[1-9][0-9]*$/     3.非正整数       /^((-\d+)|(0+))$/  ...

  4. backbone todo example

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 深入理解Java内存模型(四)——volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...

  6. YTU 2617: B C++时间类的运算符重载

    2617: B C++时间类的运算符重载 时间限制: 1 Sec  内存限制: 128 MB 提交: 284  解决: 108 题目描述 C++时间类的运算符重载 定义一个时间类Time,其数据成员为 ...

  7. 收藏一些python的小技能

    例子1:For .. else 语法 foo=[2,1] for i in foo: if i == 0: break else: print("i was never 0") 例 ...

  8. 【转载】正则表达式学习 & ASCII码表

    文章原地址: http://www.jb51.net/tools/zhengze.html <正则表达式30分钟入门教程> 其中有几个地方可以有笔记: \s 匹配任意的空白符 \b 匹配单 ...

  9. android 开发如何做内存优化

    不少人认为JAVA程序,因为有垃圾回收机制,应该没有内存泄露.其实如果我 们一个程序中,已经不再使用某个对象,但是因为仍然有引用指向它,垃圾回收器就无法回收它,当然该对象占用的内存就无法被使用,这就造 ...

  10. Mac下配置idk

    Mac下配置java #以下进入啰嗦模式演示添加jdk7 #下载jdk7的mac版 #官网下载地址http://www.oracle.com/technetwork/java/javase/downl ...