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 相关文章推荐
简明json介绍
Sep 28 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
JS深入学习之数组对象排序操作示例
May 01 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php简单封装了一些常用JS操作
2007/02/25 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php判断表是否存在的方法
2015/06/18 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
js定时器实例分享
2016/12/20 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
新手该如何学python怎么学好python?
2008/10/07 Python
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
python多线程方式执行多个bat代码
2016/06/07 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
django云端留言板实例详解
2019/07/22 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
公司员工的自我评价范例
2013/11/01 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS