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 相关文章推荐
javascript特殊用法示例介绍
Nov 29 Javascript
javascript常见用法总结
May 22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JS定义类的六种方式详解
May 12 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
Yii实现文章列表置顶功能示例
2016/10/18 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
Python 创建子进程模块subprocess详解
2015/04/08 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
详解python 内存优化
2020/08/17 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
干部培训自我鉴定
2014/01/22 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
《理想》教学反思
2014/02/17 职场文书
职务聘任书范文
2014/03/29 职场文书
美术课外活动总结
2014/07/08 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年财务部工作总结
2015/04/10 职场文书
民间借贷借条范本
2015/05/25 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
团支部书记竞选稿
2015/11/21 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server