只有省市二级联动,三级联动还没处理好,会尽快完善。

嵌入id:

<div class="form-group">
<label>地址</label>
<p>从:</p>
<div class="input-group">
<input id="areaIdFrom" name="areaIdFrom" type="hidden" value="" />
<input id="provinceFrom" name="provinceFrom" type="hidden" />
<input id="cityFrom" name="cityFrom" type="hidden" />
<div id="areaGroupFrom"></div>
</div>
<input type="text" class="form-control" name="addressFrom"/>
<p>到:</p>
<div class="input-group">
<input id="areaIdTo" name="areaId" type="hidden" value="" />
<input id="provinceTo" name="province" type="hidden" />
<input id="cityTo" name="city" id="moveCity" type="hidden" />
<div id="areaGroupTo"></div>
</div>
<input type="text" class="form-control" name="address" id="moveAddress"/>
</div>

编写js:

<script type="text/javascript">
var areaIdFrom = $("#areaIdFrom");
var provinceFrom = $("#provinceFrom");
var cityFrom = $("#cityFrom"); var areaIdTo = $("#areaIdTo");
var provinceTo = $("#provinceTo");
var cityTo = $("#cityTo"); $("#areaGroupFrom").cityselect({
loadProvince: handleLoadProvince,
loadCity: handleLoadCity,
onAreaIdChanged: function(id) {
areaIdFrom.val(id);
},
onProvinceChanged: function(id, name) {
provinceFrom.val(name);
},
onCityChanged: function(id, name) {
cityFrom.val(name);
}
});
$("#areaGroupTo").cityselect({
loadProvince: handleLoadProvince,
loadCity: handleLoadCity,
onAreaIdChanged: function(id) {
areaIdTo.val(id);
},
onProvinceChanged: function(id, name) {
provinceTo.val(name);
},
onCityChanged: function(id, name) {
cityTo.val(name);
}
});
function handleLoadProvince() {
var list = [];
$.HTTP.list({
url: "${aapi}/area/province", //${aapi}/area/province
success: function(l) {
list = l;
}
});
return list;
} function handleLoadCity(provinceId) {
var list = [];
$.HTTP.list({
url: "${aapi}/area/city/" + provinceId, // ${aapi}/area/city/
success: function(l) {
list = l;
}
});
return list;
} </script>
加载省份数据:${aapi}/area/province

加载省份为内蒙古的地级市数据:${aapi}/area/city/" + provinceId(传入内蒙古的id)

请求成功后的效果如下图。

省市二级联动--使用app-jquery-cityselect.js插件的更多相关文章

  1. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  2. 省市二级联动(原生JS)

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  3. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  4. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  5. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  6. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  7. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  8. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  9. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

随机推荐

  1. NSTimer定时器

    NSTimer的避免内存泄露与控制器的正确引用和释放:

  2. Inno Setup入门(二十一)——Inno Setup类参考(7)

    Install Setup 2013-02-02 11:31 378人阅读 评论(0) 收藏 举报 复选框 复选框(CheckBox)用于多个并不互斥的几个选项中作出一个或者多选择,例如字体可以有粗体 ...

  3. 使用anyremote进行远程鼠标控制

    源代码安装 http://anyremote.sourceforge.net/pre.html 安装  -xtest apt-get install libxtst-dev 安装 glib sudo ...

  4. Guess the Array

    Guess the Array time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  5. zzuli 1919 数列划分

    题面: Description 晴天想把一个包含n个整数的序列a分成连续的若干段,且和最大的一段的值最小,但他有强迫症,分的段数不能超过m段,然后他就不会分了...他想问你这个分出来的和最大的一段的和 ...

  6. [Python]网络爬虫(四):Opener与Handler的介绍和实例应用

    在开始后面的内容之前,先来解释一下urllib2中的两个个方法:info and geturl urlopen返回的应答对象response(或者HTTPError实例)有两个很有用的方法info() ...

  7. Android Studio中配置及使用OpenCV示例

    Android Studio配置及使用OpenCV 前言:最近在做项目移植,项目较大,在Eclipse中配置的Jni及OpenCV环境没任何问题,但是迁移到Studio中就问题一大堆,网上也找了一些资 ...

  8. 通过intent启动Activity

    android应用程序内部通过Intent来实现Activity间的跳转.也知道通过Intent调用系统程序.但若想在应用程序A内开启应用程序B(前提是A.B均已安装),该如何去实现? 记录下实现过程 ...

  9. final关键字修饰的变量

    final意义:最终的,不可改变的. 1.修饰变量,为常量,值不可变: 2.修饰对象,值可变,引用不变: 3.修饰方法,方法不可重写: 4.修饰类,无子类,不可以被继承,更不可能被重写. 1.fina ...

  10. POJ 2115 C Looooops (扩展欧几里德 + 线性同余方程)

    分析:这个题主要考察的是对线性同余方程的理解,根据题目中给出的a,b,c,d,不难的出这样的式子,(a+k*c) % (1<<d) = b; 题目要求我们在有解的情况下求出最小的解,我们转 ...