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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
python strip()函数 介绍
2013/05/24 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
Python 字符串与数字输出方法
2018/07/16 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
机械设计职业生涯规划书
2013/12/27 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
运动会广播稿200字
2015/08/19 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python