上一篇介绍了  Chosen 的使用,这篇介绍联动。看代码:

var addressResolve = function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options))
return this; //默认参数
var defaluts = {
proId: 'divProv',
cityId: 'divCity',
areaId: 'divArea'
}; var opts = $j.extend({}, defaluts, options);//使用jQuery.extend 覆盖插件默认参数 var addressInfo = this;
this.provInfo = $j("#" + opts.proId);//省份select对象
this.cityInfo = $j("#" + opts.cityId);//城市select对象
this.areaInfo = $j("#" + opts.areaId);//区县select对象 /*省份初始化方法*/
this.provInfoInit = function () {
var proOpts = "";
$j.each(provinceJson, function (index, item) {
proOpts += "<option value='" + item.ProID + "'>" + item.name + "</option>";
});
addressInfo.provInfo.append(proOpts); addressInfo.provInfo.chosen(); //初始化chosen
addressInfo.cityInfo.chosen();//初始化chosen
addressInfo.areaInfo.chosen();//初始化chosen
}; /*城市选择绑定方法*/
this.selectCity = function () {
addressInfo.cityInfo.empty();
addressInfo.cityInfo.append("<option value=选择城市>选择城市</option>");
addressInfo.areaInfo.empty();
addressInfo.areaInfo.append("<option value=选择区县>选择区县</option>");
if (addressInfo.provInfo.val() == "选择省份") { //选择无效时直接返回
addressInfo.cityInfo.trigger("liszt:updated");
addressInfo.areaInfo.trigger("liszt:updated");
return;
}
var provId = addressInfo.provInfo.val();//获取选择的省份值
var cityOpts = "";
$j.each(cityJson, function (index, item) {
if (item.ProID == provId) {
cityOpts += "<option value='" + item.CityID + "'>" + item.name + "</option>";
}
});
addressInfo.cityInfo.append(cityOpts);
addressInfo.cityInfo.trigger("liszt:updated");
addressInfo.areaInfo.trigger("liszt:updated");
}; /*区县选择绑定方法*/
this.selectArea = function () {
if (addressInfo.cityInfo.val() == "选择城市") return;
addressInfo.areaInfo.empty();
addressInfo.areaInfo.append("<option value=选择区县>选择区县</option>");
var cityId = addressInfo.cityInfo.val();//获取选择的城市值
var areaOpts = "";
$j.each(areaJson, function (index, item) {
if (item.CityID == cityId) {
areaOpts += "<option value='" + item.Id + "'>" + item.DisName + "</option>";
}
});
addressInfo.areaInfo.append(areaOpts);
addressInfo.areaInfo.trigger("liszt:updated");
}; /*对象初始化方法*/
this.init = function () {
addressInfo.provInfo.append("<option value=选择省份>选择省份</option>");
addressInfo.cityInfo.append("<option value=选择城市>选择城市</option>");
addressInfo.areaInfo.append("<option value=选择区县>选择区县</option>"); addressInfo.provInfoInit();
addressInfo.provInfo.bind("change", addressInfo.selectCity);
addressInfo.cityInfo.bind("change", addressInfo.selectArea);
} //私有方法,检测参数是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
}

Chosen三级联动的更多相关文章

  1. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  2. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  3. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  4. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  5. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  6. webForm(三)——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  7. C#三级联动

    1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...

  8. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  9. easyUI下拉列表三级联动

    首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...

随机推荐

  1. 带有权重的服务器SLB的实现

    1)参考了网络上的算法,但是那个算法仅仅是用于展示“权重轮循”的意图,在真正的网络下,因为是并行的,所以不可能单纯一个简单的循环可以解决问题. 2)用lock的话性能显然有损失. 3)想了一阵,结合C ...

  2. java实现任务调度

    最近的一个小项目是做一个简单的数据仓库,需要将其他数据库的数据抽取出来,并通过而出抽取成页面需要的数据,以空间换时间的方式,让后端报表查询更快. 因为在抽取的过程中,有一定的先后顺序,需要做一个任务调 ...

  3. iOS 富文本属性

    // NSFontAttributeName 设置字体属性,默认值:字体:Helvetica(Neue) 字号:12 // NSForegroundColorAttributeNam 设置字体颜色,取 ...

  4. KVC的特殊用法

    - (id)valueForKeyPath:(NSString *)keyPath方法的强大用法,举个例子: NSArray *array = @[@"name", @" ...

  5. NPOI excel导出快速构建

    直接上代码,这个是一个在webFrom中的例子,要请求的页面是ashx public void ExportVisaFeeAll(HttpContext context) { try { string ...

  6. Centos7 部署.netCore2.0项目

    最近在学习.netCore2.0,学习了在Centos上部署.netCore的方法,中间遇到过坑,特意贴出来供大家分享,在此我只是简单的在CentOS上运行.NETCore网站,没有运用到nginx等 ...

  7. Java 异常的处理方式--throws和try catch

    异常的第一种处理方式throws. 看以下例子: import java.io.*;public class ExceptionTest04{ public static void main(Stri ...

  8. pyhton基础中的要点一

    1.python变量的命名规范: (1)变量必须以数字,字母,下划线的任意组合 (2)变量建议用驼峰标识,或下划线 (3)变量要有可描述性 (4)不能以数字开头 (5)不能用python的关键字 (6 ...

  9. 洛谷P2196 挖地雷(dp)

    题意 题目链接 Sol 早年NOIP的题锅好多啊.. 这题连有向边还是无向边都没说(害的我wa了一遍) 直接\(f[i]\)表示到第\(i\)个点的贡献 转移的时候枚举从哪个点转移而来 然后我就用一个 ...

  10. 云计算的三种模式:IaaS、PaaS和SaaS

    云计算主要分为三种服务模式,而且这个三层的分法重要是从用户体验的角度出发的: 1. Software as a Service,软件即服务,简称SaaS,这层的作用是将应用作为服务提供给客户. 2. ...