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. |
无
无
无
数据源: ID必须为字符串或者可转化为字符串的类型,不建议使用 空值('')
无
数据源: ID必须为字符串或者可转化为字符串的类型,不建议使用 空值('')
示例代码请访问 数据字典-组件demo;依次选择"数据源:国家行政区域"、下拉选择框(N级联动)