最终效果:

满足要求,

上代码 :

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. Linear Regression

    大学时候学物理实验的时候接触过线性回归,现在忘记了...还得重新拾起来.学习不扎实耽误了多少时光... sigh Suppose that you time a program as a functi ...

  2. Objective-C:自定义Block函数

    Block函数是一种类似于函数指针的函数,程序员只需要把需要操作的代码封装到定义的block中即可,以后需要使用时,直接调用,非常方便.... 举例如下: 第一种形式:自定义一个无返回值而且无参数的b ...

  3. RAID

    RAID(is short for redundant arrays of independent disks) 独立/廉价磁盘冗余阵列.基本思想:把多个相对便宜的硬盘组合起来,成为一个硬盘阵列组,使 ...

  4. linux环境下,利用tc限制两台服务器间的网速,非常简单。

    最近再搞postgres的数据同步,需要模拟异地机房有带宽限制时的同步效果,所以想要限制一下两台机器之间的网速. ts命令功能很强,同时也好难理解和使用,经常浪费了好半天还是搞不定. 这里分享一个简单 ...

  5. Bootstrap plugin编写

    滚动demo: <!doctype html> <html lang="en"> <head> <meta charset="U ...

  6. javascript 中$符号是代表什么意思!

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的 1. 首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asda ...

  7. PHP 投票练习

    重点:1.进度条的显示2.操作数据库<form action="chuli.php" method="post"> <?php include ...

  8. Android 如何设置默认语言

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  9. shell脚本学习笔记

    1.判断符号:中括号[ ] [ ]进行数据的判断,例如我想知道HOME这个变量是否为空,[ -z "$HOME" ],或者两个字符串是否相等,[ "$HOME" ...

  10. Android 代码监控apk安装,卸载,替换

    public class GetBroadcast extends BroadcastReceiver { private static GetBroadcast mReceiver = new Ge ...