下拉框组件-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)'});
     

配置信息

属性名 类型 默认值 描述
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初始化(带拼音检索)

            
二、本地html初始化(多选),注意optgroup是分组标签,非必须

            
三、本地JSON数据初始化或远程ajax数据初始化(只在初始化时请求一次,返回全部数据)

            

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

四、ajax实时检索加载数据(根据搜索关键词的变化实时发送AJAX请求)

            

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

五、select2数据内容更新

            
六、select2选择及validata校验(注意:此实例只用于演示效果)

            
七、select2 多级联动

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