jQuery Chosen通用初始化


Posted in Javascript onMarch 07, 2017

一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/

no_results_text:"xxxxx"无搜索结果时显示的文本

allow_single_deselect:true 是否允许取消选择
disable_search: true 是否有搜索框出现

max_selected_options:当select为多选时,最多选择个数

官方说明文档地址

配置选项的官方说明文档地址

/* 功能: Chosen通用初始化
 * 创建人:Brian 创建时间:2016-12-13
 */
(function ($j) {
  var chosenTool = function (el, options) {
    this.opts = options;
    this.chosenInit();
    this.chose_get_init();
    this.chose_mult_set_init(this.opts.hidClassName);
    this.clickEvent();
    return this;
  }
  chosenTool.opts = {
    selectId: '',//selectId
    hidClassName: '',//隐藏域Class
    placeholdertxt: '',//select中placeholder文字
    noresulttxt: '',//输入的名称未查到时显示的文字
    dataJson: ''//数据源
  };
  $j.fn.myChosenTool = function (opt) {
    var value,
      args = Array.prototype.slice.call(arguments, 1);
    var $jthis = $j(this),
      data = $jthis.data('chosenTool'),
      options = $j.extend({}, chosenTool.opts, $jthis.data(),
        typeof option === 'object' && option);
    if (typeof option === 'string') {
      //判断用户调用的方法是否存在
      //if ($j.inArray(option, allowedMethods) < 0) {
      //  throw new Error("Unknown method: " + option);
      //}
      if (!data) {
        return;
      }
      value = data[option].apply(data, args);
      if (option === 'destroy') {
        $jthis.removeData('chosenTool');
      }
    }
    /*插件外部调用插件内部的方法需要修改成下面形式*/
    //if (typeof opt === 'string') {
    //  if (!data) {
    //    return;
    //  }
    //  value = data[opt].apply(data, args);
    //  if (opt === 'destroy') {
    //    $jthis.removeData('chosenTool');
    //  }
    //}
    if (!data) {
      opt["selectId"] = $j(this).attr("id");
      $jthis.data('chosenTool', (data = new chosenTool(this, opt)));
    }
    console.log(data);
    return typeof value === 'undefined' ? this : value;
  };
  chosenTool.prototype.clickEvent = function () {
    var _this = this;
    $j("#" + this.opts.selectId).on("change", function () {
      _this.chose_get_value();
    });
  };
  /*下拉框初始化方法*/
  chosenTool.prototype.selectInfoInit = function () {
    var proOPts = "";
    this.opts.dataJson = $j.parseJSON(this.opts.dataJson);
    $j.each(this.opts.dataJson, function (index, item) {
      proOPts += "<option value='" + item.ValueField + "'>" + item.TextField + "</option>";
    });
    $j("#" + this.opts.selectId).append(proOPts);
    //初始化chosen
    $j("#" + this.opts.selectId).chosen({
      allow_single_deselect: true, //是否允许取消选择
      placeholder_text_multiple: this.opts.placeholdertxt, //多选框没有选中任何值的时候 显示的文字
      no_results_text: this.opts.noresulttxt,//无搜索结果时显示的文本
      search_contains: true//是否支持模糊搜索
    });
  };
  /*对象初始化方法*/
  chosenTool.prototype.chosenInit = function () {
    this.selectInfoInit();
  };
  //私有方法,检测参数是否合法
  chosenTool.prototype.isValid = function () {
    return !this.options || (this.options && typeof this.options === "object") ? true : false;
  };
  //数据同步
  chosenTool.prototype.chose_get_init = function () {
    var selectId = this.opts.selectId;
    $j("#" + this.opts.selectId).chosen().change(
         function () {
           $j("#" + selectId).trigger("liszt:updated");//更新下拉框
         });
  };
  //单选select value获取
  chosenTool.prototype.chose_get_value = function () {
    var selectVal = $j("#" + this.opts.selectId).val();
    $j("." + this.opts.hidClassName).val(selectVal);
  };
  //单选select value获取
  chosenTool.prototype.chose_mult_set_init = function () {
    var values = $j("." + this.opts.hidClassName).val();
    if (values && values.indexOf(',') > 0) {
      var arr = values.split(',');
      var length = arr.length;
      var value = '';
      for (i = 0; i < length; i++) {
        value = arr[i];
        $j("#" + this.opts.selectId + " [value='" + value + "']").attr('selected', 'selected');
      }
    } else {
      $j("#" + this.opts.selectId + " [value='" + values + "']").attr('selected', 'selected');
    }
    $j("#" + this.opts.selectId).trigger("liszt:updated");
  };
  //select text获取,多选时请注意
  chosenTool.prototype.chose_get_text = function () {
    return $j("#" + this.opts.selectId + " option:selected").text();
  };
})(jQuery);

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

Javascript 相关文章推荐
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
Angular4 反向代理Details实践
May 30 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python在地图上画比例的实例详解
2020/11/13 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
开业庆典邀请函
2014/01/08 职场文书
机关财务管理制度
2014/01/17 职场文书
面试后的感谢信范文
2014/02/01 职场文书
超市开学活动方案
2014/03/01 职场文书
财务担保书范文
2014/04/02 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python