Chosen三级联动
上一篇介绍了 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三级联动的更多相关文章
- js封装的三级联动菜单(使用时只需要一行js代码)
		
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
 - 利用select实现年月日三级联动的日期选择效果
		
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
 - jQuery省市区三级联动插件
		
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
 - jQuery - 全国省市县三级联动
		
最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...
 - 省市区三级联动 pickerView
		
效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...
 - webForm(三)——三级联动
		
三级联动 首先附图一张,初步认识一下什么是三级联动: 注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...
 - C#三级联动
		
1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...
 - JS省市区三级联动
		
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
 - easyUI下拉列表三级联动
		
首先是先想好数据库的搭建,通过地区id,地区名称,上级地区id就可以实现,所有省市区的数据 例如: DAO层 service层 Servlet 页面 <!DOCTYPE html> < ...
 
随机推荐
- Python读取文件编码及内容
			
Python读取文件编码及内容 最近做一个项目,需要读取文件内容,但是文件的编码方式有可能都不一样.有的使用GBK,有的使用UTF8.所以在不正确读取的时候会出现如下错误: UnicodeDecode ...
 - 通过反射获取及调用方法(Method)
			
1.获取方法使用反射获取某一个类中的方法,步骤:①找到获取方法所在类的字节码对象②找到需要被获取的方法 Class类中常用方法: public Method[] getMethods():获取包括自身 ...
 - fetch将替代ajax?
			
原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 ...
 - [PY3]——字典排序问题总结—(zip()函数、OrderedDict、itemgetter函数)
			
问题 怎样在数据字典中执行一些计算操作(从而实现求最小值.最大值或排序等等)? 如何能根据某个或某几个字典字段来排序一个字典列表? 如何创建一个字典,并且在迭代或序列化这个字典的时候能够控制元素的顺序 ...
 - Javascript的构造函数和constructor属性
			
原型链 function Foo() { this.value = 42;}Foo.prototype = { method: function() {}}; function Bar() {} // ...
 - 进入与退出anconda虚拟环境
			
# 进入虚拟环境,使用 # # $ conda activate spider-venv # # 退出虚拟环境,使用 # # $ conda deactivate
 - YII框架路由配置
			
首先要在服务器配置(httpd.conf)中开启重写模块: #开启重写模块,将其前面的#去掉 LoadModule rewrite_module modules/mod_rewrite.so #Dir ...
 - Rabbit简单队列模式
			
1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/ ...
 - 重构指南 - 封装条件(Encapsulate Conditional)
			
封装就是将相关的方法或者属性抽象成为一个对象. 封装的意义: 对外隐藏内部实现,接口不变,内部实现自由修改. 只返回需要的数据和方法. 提供一种方式防止数据被修改. 更好的代码复用. 当代码中包含 ...
 - Android 集成百度统计
			
在这里简单的介绍下怎么统计自己研发的APP 的用户活跃度,和使用量,以此来展示自己APP的用户使用量! 我们的APP都需要注入数据分析,以供我们实时的了解APP的下载和使用量提供了依据! 不过我还是更 ...