Detailed explanation of jQuery Chosen universal initialization

This article mainly introduces the jQuery Chosen universal initialization. It is very good and has reference value. Friends in need can refer to it. I hope it can help everyone.

I have been using the Chosen js plug-in, whose purpose is to beautify the drop-down box. github address: https://harvesthq.github.io/chosen/

no_results_text: The text displayed when "xxxxx" has no search results

allow_single_deselect: true whether to allow deselection
disable_search : true Whether a search box appears

max_selected_options: When the select is multiple selection, the maximum number of choices

Official documentation address

Official documentation address for configuration options

/* 功能: 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 === &#39;destroy&#39;) {
        $jthis.removeData(&#39;chosenTool&#39;);
      }
    }
    /*插件外部调用插件内部的方法需要修改成下面形式*/
    //if (typeof opt === &#39;string&#39;) {
    //  if (!data) {
    //    return;
    //  }
    //  value = data[opt].apply(data, args);
    //  if (opt === &#39;destroy&#39;) {
    //    $jthis.removeData(&#39;chosenTool&#39;);
    //  }
    //}
    if (!data) {
      opt["selectId"] = $j(this).attr("id");
      $jthis.data(&#39;chosenTool&#39;, (data = new chosenTool(this, opt)));
    }
    console.log(data);
    return typeof value === &#39;undefined&#39; ? 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=&#39;" + item.ValueField + "&#39;>" + 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(&#39;,&#39;) > 0) {
      var arr = values.split(&#39;,&#39;);
      var length = arr.length;
      var value = &#39;&#39;;
      for (i = 0; i < length; i++) {
        value = arr[i];
        $j("#" + this.opts.selectId + " [value=&#39;" + value + "&#39;]").attr(&#39;selected&#39;, &#39;selected&#39;);
      }
    } else {
      $j("#" + this.opts.selectId + " [value=&#39;" + values + "&#39;]").attr(&#39;selected&#39;, &#39;selected&#39;);
    }
    $j("#" + this.opts.selectId).trigger("liszt:updated");
  };
  //select text获取，多选时请注意
  chosenTool.prototype.chose_get_text = function () {
    return $j("#" + this.opts.selectId + " option:selected").text();
  };
})(jQuery);

Related recommendations:

jQuery Validate cannot verify the chosen-select element. How to solve it

Chosen How to use the selection box plug-in based on jquery_jquery

Jquery chosen dynamic setting value example introduction_jquery

The above is the detailed content of Detailed explanation of jQuery Chosen universal initialization. For more information, please follow other related articles on the PHP Chinese website!