下拉框组件-select2

jstree-demo

官网地址： http://select2.github.io/

注：对于外层父元素是使用 .form-inline 样式时，需要对select元素添加一个固定宽度

例：<select style="width: 100px;"></select>

常用方法及注意事项
事件名称 描述
change 每当选择或删除选项时触发。（不建议使用）
change.select2 每当选择或删除选项时触发。（建议使用）
select2:closing Triggered before the dropdown is closed. This event can be prevented.
select2:close Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:opening Triggered before the dropdown is opened. This event can be prevented.
select2:open Triggered whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:selecting Triggered before a result is selected. This event can be prevented.
select2:select Triggered whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselecting Triggered before a selection is removed. This event can be prevented.
select2:unselect Triggered whenever a selection is removed. select2:unselecting is fired before this and can be prevented. 
/* 监听事件 */
//当select2：select被触发时，选择的数据可以通过params.data属性访问： 注意：change事件中不包含params
$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});
//e.params.data 示例:
{
  "id": 1,
  "text": "Tyto alba",
  "genus": "Tyto",
  "species": "alba"
}

/* 触发事件*/
//您可以使用jQuery触发器方法在Select2控件上手动触发事件。 但是，如果您想将某些数据传递给事件的任何处理程序，则需要构建一个新的jQuery Event对象并触发它：
var data = {
  "id": 1,
  "text": "Tyto alba",
  "genus": "Tyto",
  "species": "alba"
};

$('#mySelect2').trigger({
    type: 'select2:select',
    params: {
        data: data
    }
});

组件：
 <script src="../js/plugins/select2/js/select2.full.min.js"></script>
 <link rel="stylesheet" href="../js/plugins/select2/css/select2.css">

注意事项：
 1、【重要】数据源中 ID必须为字符串或者可转化为字符串的类型，不建议使用空值（''）；
 2、如果需要外部更改select2的内容需要触发select2的change事件，通知select2刷新视图；（例如：初始化默认选中项）
      例如：$('selector').val('5').trigger('change.select2'); 
      多选必须使用数组形式赋值：$('selector').val(['5','2']).trigger('change.select2');
      注意：平台select2_init.API.setVal()及API.updateOption()方法已默认通知select2刷新视图，不需额外处理;
 3、隐藏搜索框 （option）： {minimumResultsForSearch: Infinity} ;注当允许用户手动输入时（tag:true）,无搜索框；
 4、打开、关闭下拉框 ：
    $('#mySelect2').select2('open');
    $('#mySelect2').select2('close');
 5、销毁
    $('#mySelect2').select2('destroy');
 6、校验selec2是否初始化完成：
    if ($('#mySelect2').hasClass("select2-hidden-accessible")) {/* 已初始化完成 */}
 7、禁用select2 
    $('#mySelect2').prop('disabled',true);
 8、清空（重置）选项 
    $('#mySelect2').val(null 或 对应‘请选择’项的value值，例如'').trigger('change.select2');
 9、选项修改后，触发validate校验（注意：平台select2_init方法已默认支持，不需额外处理）
    $('selector').on('change.select2', function() {
        $(this).trigger('focusout.validate').trigger('click.validate');
    });
10、【重要】使用平台select2_init方法以“非AJAX实时检索模式”初始化时，通过给select元素设置 selectedvalue 属性或通过js设置配置属性initValue,可自动实现初始化默认选中，为空或未设置则默认选中第一项；例如：
    HTML方式：<select selectedvalue="默认选中项的值（key）"></select>
    JS方式：select2_init('demoid',{initValue:'默认选中项的值（key）'});
     


/**
   * 插件select2初始化
   * @param {String} id domID
   * @param {String|Object} url ajax-url，如果为对象类型（object）则是本地html初始化，如果是数组类型（array）则是本地数据初始化，例如 select2_init('id',{})
   * @param {String} ajaxtype = [get|post] ajax请求类型 默认get
   * @param {Function} datafn 定义ajax发送到后台的数据
   * @example
   *  // term 实时数据检索模式下，为用户在搜索框中输入的值
   *  function(term){
   * return {
   *  name1:'value1',name2:'value2',name3:term
   * };
   *  }
   * @param {Object} opt 配置属性
   * @example
   *  {
   * iscache:true, //是否本地缓存ajax数据（非实时检索模式）
   * multiple:false, //是否多选，默认单选
   * ispinyin:false, //是否启用拼音检索 默认：false
   * initValue:'' //初始化默认值  暂不支持ajax远程实时数据搜索
   * drawCallBack: function (async) {}, //数据加载且初始化完成,不包括远程实时数据检索模式; 可返回一个参数，表示是否使用了异步组件构造（非ajax异步）；
   * other:{} //select2 原生配置属性
   *  }
   * @return  {Object} API对象
   * @example
   *  API:select2 select2原生实例对象
   *  API:setVal fn(array, triggerChange) 设置选中项；['value1','value2']； 如果第二个参数设置为 true 则不触发change事件(会触发change.select2事件，用于通知select2更新视图)；
   *   但仍会触发validate校验；该行为与使用js修改select的值时不触发change事件的行为一致；
   *  API:getVal fn() 获取当前选中项的值；多选时为数组类型；
   *  API:updateOption fn(html) 修改select中的项目（node-options）,等同于 $('selector').html(html)，会触发validate校验；
   *  API:changeCallback fn(e) 选中项改变后的回调函数，即原生change事件;
   *  API:changeCallbackByitem fn(e.params.data, e) 当每一个option的选择状态发生改变时，都会调用次回调函数（例如修改多选时，会触发多次）；返回当前发生变化的option的数据；
   *  API:destroy fn() 销毁
   */
  select2_init: function(id, url, ajaxtype, datafn, opt)

配置信息

属性名 类型 默认值 描述
adaptContainerCssClass
adaptDropdownCssClass
ajax object null Provides support for ajax data sources.
allowClear boolean false Provides support for clearable selections.
amdBase string ./ See Using Select2 with AMD or CommonJS loaders.
amdLanguageBase string ./i18n/ See Using Select2 with AMD or CommonJS loaders.
closeOnSelect boolean true Controls whether the dropdown is closed after a selection is made.
containerCss
containerCssClass string ''
data array of objects null Allows rendering dropdown options from an array.
dataAdapter SelectAdapter Used to override the built-in DataAdapter.
debug boolean false Enable debugging messages in the browser console.
dir
disabled boolean false When set to true, the select control will be disabled.
dropdownAdapter DropdownAdapter Used to override the built-in DropdownAdapter
dropdownAutoWidth boolean false
dropdownCss
dropdownCssClass string ''
dropdownParent jQuery selector or DOM node $(document.body) Allows you to customize placement of the dropdown.
escapeMarkup callback Utils.escapeMarkup Handles automatic escaping of content rendered by custom templates.
initSelection callback See initSelection. This option was deprecated in Select2 v4.0, and will be removed in v4.1.
language string or object EnglishTranslation Specify the language used for Select2 messages.
matcher A callback taking search params and the data object. Handles custom search matching.
maximumInputLength integer 0 Maximum number of characters that may be provided for a search term.
maximumSelectionLength integer 0 The maximum number of items that may be selected in a multi-select control. If the value of this option is less than 1, the number of selected items will not be limited.
minimumInputLength integer 0 Minimum number of characters required to start a search.
minimumResultsForSearch integer 0 The minimum number of results required to display the search box.
multiple boolean false This option enables multi-select (pillbox) mode. Select2 will automatically map the value of the multiple HTML attribute to this option during initialization.
placeholder string or object null Specifies the placeholder for the control.
query A function taking params (including a callback) Query This option was deprecated in Select2 v4.0, and will be removed in v4.1.
resultsAdapter ResultsAdapter Used to override the built-in ResultsAdapter.
selectionAdapter SingleSelection or MultipleSelection, depending on the value of multiple. Used to override the built-in SelectionAdapter.
selectOnClose boolean false Implements automatic selection when the dropdown is closed.
sorter callback
tags boolean / array of objects false Used to enable free text responses.
templateResult callback Customizes the way that search results are rendered.
templateSelection callback Customizes the way that selections are rendered.
theme string default Allows you to set the theme.
tokenizer callback A callback that handles automatic tokenization of free-text entry.
tokenSeparators array [] The list of characters that should be used as token separators.
width string resolve Supports customization of the container width.
一、本地HTML初始化（带拼音检索）
<div class="form-group">
  <label>默认:</label>
  <select id="sel_menu2_1" class="form-control" style="width: 200px;">
    <option value="-1">请选择</option>
    <option value="1">用户管理</option>
    <option value="2">角色管理</option>
    <option value="3">部门管理</option>
    <option value="4">菜单管理</option>
    <option value="5">订单查询</option>
    <option value="6">订单导入</option>
    <option value="7">订单删除</option>
    <option value="8">订单撤销</option>
    <option value="9">基础数据维护</option>
    <option value="10">基础数据维护22</option>
    <option value="11">基础数据维护333</option>
    <option value="12">基础数据维护4444</option>
    <option value="13">基础数据维护5555</option>
    <option value="14">基础数据维护6666</option>
  </select>
</div>

<div class="form-group">
  <label>带拼音检索:</label>
  <select id="sel_menu2_2" class="form-control" style="width: 200px;">
    <option value="-1">请选择</option>
    <option value="1">用户管理</option>
    <option value="2">角色管理</option>
    <option value="3">部门管理</option>
    <option value="4">菜单管理</option>
    <option value="5">订单查询</option>
    <option value="6">订单导入</option>
    <option value="7">订单删除</option>
    <option value="8">订单撤销</option>
    <option value="9">基础数据维护</option>
    <option value="10">基础数据维护22</option>
    <option value="11">基础数据维护333</option>
    <option value="12">基础数据维护4444</option>
    <option value="13">基础数据维护5555</option>
    <option value="14">基础数据维护6666</option>
  </select>
</div>

<div class="form-group">
  <label>默认选中“订单导入”:</label>
  <select id="sel_menu2_3" class="form-control" style="width: 200px;" selectedvalue="6">
    <option value="-1">请选择</option>
    <option value="1">用户管理</option>
    <option value="2">角色管理</option>
    <option value="3">部门管理</option>
    <option value="4">菜单管理</option>
    <option value="5">订单查询</option>
    <option value="6">订单导入</option>
    <option value="7">订单删除</option>
    <option value="8">订单撤销</option>
    <option value="9">基础数据维护</option>
    <option value="10">基础数据维护22</option>
    <option value="11">基础数据维护333</option>
    <option value="12">基础数据维护4444</option>
    <option value="13">基础数据维护5555</option>
    <option value="14">基础数据维护6666</option>
  </select>
</div>

$(function() {
  //默认
  var SEL2_ = COM_TOOLS.select2_init('sel_menu2_1');
  SEL2_.changeCallback(function(e) { //当选择项发生变化时；
  });
  //带拼音检索:
  COM_TOOLS.select2_init('sel_menu2_2', {
    ispinyi: true //开启拼音检索
  });
  //默认选中“订单导入”
  COM_TOOLS.select2_init('sel_menu2_3');
});

无
二、本地html初始化（多选）,注意optgroup是分组标签，非必须
<select id="sel_menu3" multiple="multiple" class="form-control">
  <!-- <optgroup label="系统设置"> -->
  <option value="1">用户管理</option>
  <option value="2">角色管理</option>
  <option value="3">部门管理</option>
  <option value="4">菜单管理</option>
  <!-- </optgroup>
              <optgroup label="订单管理"> -->
  <option value="5">订单查询</option>
  <option value="6">订单导入</option>
  <option value="7">订单删除</option>
  <option value="8">订单撤销</option>
  <!-- </optgroup>
              <optgroup label="基础数据"> -->
  <option value="9">基础数据维护</option>
  <option value="10">基础数据维护22</option>
  <option value="11">基础数据维护333</option>
  <option value="12">基础数据维护4444</option>
  <option value="13">基础数据维护5555</option>
  <option value="14">基础数据维护6666</option>
  <!-- </optgroup> -->
</select>

$(function() {
  /*demo2*/
  COM_TOOLS.select2_init('sel_menu3', {
    other: {
      closeOnSelect: false,
      //scrollAfterSelect: false,
      dropdownCssClass: 'cus-select2-dropdown-2', //可选，cus-select2-dropdown-1：选中的前面加对勾号；cus-select2-dropdown-2：前面添加拟态复选框；
      //maximumSelectionLength: 6, //最多选三个
      //placeholder: TEDU_MESSAGE.get("platform.plugin.validate.maxlength", [3]) //maxLength 不能多于三个
    }
  });
});

无
三、本地JSON数据初始化或远程ajax数据初始化（只在初始化时请求一次，返回全部数据）
<div class="form-group">
  <label>远程ajax数据初始化: </label>
  <select id="sel_menu4" class="form-control">
    <option value="-1">请选择</option>
  </select>
</div>
<div class="form-group">
  <label>远程ajax数据初始化（HTML属性方式）：</label>
  <!--
        data-opt_url="/select2/api" 【必须】接口地址；
        data-opt_ajaxtype="get" 【可选】接口请求类型 默认get
        opt_ajaxdata='{"param1":"参数1"}' 【可选】接口数据，同ajax-data；注意参数必须是标准JSON格式，且外面用英文单引号包裹；
        selectedvalue="2" 【可选】初始化时的默认选中值,为空或未设置则默认选中第一项
    -->
  <select id="sel_menu4-1" class="form-control" data-opt_url="/select2/api" selectedvalue="2">
    <option value="-1">请选择</option>
  </select>
</div>
<div class="form-group">
  <label>本地JSON数据初始化: </label>
  <select id="sel_menu4-2" class="form-control">
    <option value="-1">请选择</option>
  </select>
</div>

$(function() {
  //远程ajax数据初始化
  COM_TOOLS.select2_init('sel_menu4', '/select2/api', 'get');
  //远程ajax数据初始化（HTML属性方式）
  COM_TOOLS.select2_init('sel_menu4-1');
  //本地JSON数据初始化
  var data_ = [{
    id: '0',
    text: '0000'
  }, {
    id: '1',
    text: '1111'
  }, {
    id: '2',
    text: '2222'
  }, {
    id: '3',
    text: '3333'
  }, {
    id: '4',
    text: '4444'
  }];
  COM_TOOLS.select2_init('sel_menu4-2', data_);
});

无

数据源: ID必须为字符串或者可转化为字符串的类型，不建议使用 空值（''）

四、ajax实时检索加载数据（根据搜索关键词的变化实时发送AJAX请求）
<select id="sel_menu5" name="sel_menu5" multiple="multiple" class="form-control"></select>

$(function() {
  //远程实时检索加载数据
  var SEL2_ = COM_TOOLS.select2_init('sel_menu5', '/select2/search/api', 'get', false, {
    iscache: false, //必须 设置为false时才是远程实时检索加载数据模式
    multiple: true,
    other: {
      allowClear: true, //启用清除按钮
      minimumInputLength: 1, //最少需要输入一个字符才可查询
      placeholder: LOCAL_MESSAGE_DATA["platform.plugin.msg.enterSearch"] //"enterSearch" 请输入搜索内容
    }
  });
  SEL2_.changeCallback(function(e) { //选中项改变时回调函数
    console.log('当前选中值：', SEL2_.getVal()); //获取当前选中项的value;多选时为数组类型；
  });
});

无

数据源: ID必须为字符串或者可转化为字符串的类型，不建议使用 空值（''）

五、select2数据内容更新
<div class="form-inline">
  <div class="form-group">
    <select id="test-05" style="width: 100px;">
      <option value="">-请选择-</option>
      <option value="1">数据一</option>
      <option value="2">数据二</option>
      <option value="3">数据三</option>
    </select>
    <button id="add-data" class="btn btn-sm btn-info">添加数据</button>
    <button id="update-data" class="btn btn-sm btn-primary">全量覆盖数据</button>
  </div>
</div>

$(function() {
  var SEL2_ = COM_TOOLS.select2_init('test-05');
  $('#add-data').click(function() {
    var html_ = '<option value="5">新增数据</option>';
    SEL2_.select2.append(html_).trigger('change.select2'); //.trigger('change.select2'); 新增select数据后触发select2更新
  });
  $('#update-data').click(function() {
    var html_ = '<option value="">-请选择-</option><option value="1">新数据一</option><option value="1">新数据二</option>';
    SEL2_.updateOption(html_); //自动触发select2刷新视图并校验validate；
  });
});
六、select2选择及validata校验（注意：此实例只用于演示效果）
<div class="form-inline">
  <div class="form-group">
    <form id="test-form">
      <select id="test-06" name="test-vali" required="true" style="width: 100px;">
        <option value="">-请选择-</option>
        <option value="1">数据一</option>
        <option value="2">数据二</option>
        <option value="3">数据三</option>
      </select>
      <button type="button" id="test-vali" class="btn btn-sm btn-info">validate校验</button>
    </form>
  </div>
</div>

$(function() {
  COM_TOOLS.select2_init('test-06');
  $('#test-form').validate();
  $('#test-vali').click(function() {
    $('#test-form').validate().form(); //仅用于demo演示需要，表单验证请使用"submitHandler";
  });
})
七、select2 多级联动

示例代码请访问 数据字典-组件demo；依次选择"数据源：国家行政区域"、下拉选择框（N级联动）