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 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
js对象的比较
Feb 26 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
优秀研究生自我鉴定
2013/12/04 职场文书
冬季安全检查方案
2014/05/23 职场文书
课内比教学心得体会
2014/09/09 职场文书
施工安全协议书范本
2014/09/26 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
场地使用证明模板
2014/10/25 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
MySQL GTID复制的具体使用
2022/05/20 MySQL