jQuery中Chosen三级联动功能实例代码


Posted in Javascript onMarch 07, 2017

Chosen 是一个JavaScript插件,它能让丑陋的、很长的select选择框变的更好看、更方便,不仅如此,它更扩大了,增长了主动筛选的功能。

本文介绍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;
  }
}

以上所述是小编给大家介绍的jQuery中Chosen三级联动实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
You might like
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
详解python eval函数的妙用
2017/11/16 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python代码实现猜拳小游戏
2020/11/30 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
高中生逃课检讨书
2014/10/10 职场文书
工作检讨书怎么写
2014/10/10 职场文书
党员作风建设自查报告
2014/10/23 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书