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> < ...
随机推荐
- 网站Http升级至Https(基于Tomcat)
由于之前一直忙于服创比赛,然后就导致好久没写博客了. 现在服创结束也有十来天了,感觉不写点什么就对不起自己了. 于是乎,就写写将网站从http升级到https的过程吧. 首先域名和服务器自然是必须的, ...
- HTTP 状态代码之汇总+理解
这里有百度百科的介绍,还挺全的. 下面是在开发过程中遇到过的各种码,自己的问题自己的原因,同码不同错,贱笑贱笑. HTTP 406 Not Acceptable 这个错误的原因,是由于框架使用了`Sp ...
- 阿里云服务器docker搞定镜像
docker的安装可以看前面的文章 这里我的docker已经安装完成了,该搞镜像了:这里的镜像用的是我以前自己搞的,虽然镜像有点大,但是胜在自己搞的,熟悉(熟悉不熟悉鬼知道) 我的镜像放在了阿里云容器 ...
- Shell脚本之awk详解
一.基本介绍 1.awk: awk是一个强大的文本分析工具,在对文本文件的处理以及生成报表,awk是无可替代的.awk认为文本文件都是结构化的,它将每一个输入行定义为一个记录,行中的每个字符串定义为一 ...
- Azure 项目构建 – 部署高可用的 Python Web 应用
Python 以其优美,清晰,简单的特性在全世界广泛流行,成为最主流的编程语言之一.Azure 平台针对 Python 提供了非常完备的支持.本项目中,您将了解如何构造和部署基于 Azure Web ...
- EasyPusher推流类库的.NET调用说明
EasyPusher推流类库的.NET调用说明 以下内容基于在使用EasyPusher过程中遇到的问题,以及相应的注意事项.本文主要是基于对C++类库的二次封装(便于调试发现问题)以供C#调用以及对一 ...
- Collections自定义List排序规则
Collections自定义List排序规则 //这里的顺序,是我自己定义的一个List<String> String[] regulation = {"jams",& ...
- Win10自带Ubuntu子系统下Mysql安装踩坑记录
linux系统为win10自带Ubuntu子系统 错误的安装过程 我按照一般的方法安装mysql,安装步骤如下 1.升级源 $ sudo apt-get update 2.安装mysql $ sudo ...
- C Primer Plus note9
undefined reference to `WinMain@16'| 运行程式的时候出现了这样的错误,而且编译器也没有提示是哪一行出错: 经过百度搜索,发现了问题所在: 上面的图中main()函数 ...
- python文件操作各种模式和常用方法总结r r+ rb r+b
1.读,r r+ rb r+b read() 全部读取 read(n) 读取一部分 r模式下:n 个字符. rb模式下:n个 字节. readline() 按行读取. readlines() 返回个列 ...