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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
PHP应用JSON技巧讲解
2013/02/03 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python 公共方法汇总解析
2019/09/16 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
C++面试题目
2013/06/25 面试题
毕业生自我推荐
2013/11/04 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
微信小程序和php的登录实现
2021/04/01 PHP