前端开发过程中slect2的使用_Javascript

前端开发过程中slect2的使用

发布时间：2019-01-10

使用也是非常的简单

$('#select2').select2({
    data: responseData.result.specification
});

清空选中的值

$('#select2').val('').select2();

默认选中某一项

$('#select2').val('12').select2(); 默认选中option是12 的这个值

使用data数组填充select的option

$('#report_id').select2({
    data: responseData.result.list
});

responseData.result.list

使用 id text 这样的键值对象对数据进行填充

select2 是一个快速检索的select 框，很方便

具体参数可以参考一下：

参数

类型描述

Width字符串控制宽度样式属性的Select2容器div

minimumInputLengthint最小数量的字符

maximumInputLengthint最大数量的字符

minimumResultsForSearchInt最小数量的结果

maximumSelectionSizeint可选择的最大条目数

placeholder字符串选择初始值

separator字符串分隔符字符或字符串用来划定id

allowClear布尔此选项只指定占位符

multiple布尔Select2是否允许选择多个值

openOnEnter打开下拉如果设置为true,当用户按下回车键,Select2关闭。默认情况下启用这个选项。

id函数函数用于获取id从选择对象或字符串id存储代表的关键

matcher函数用于确定是否搜索词匹配一个选项时使用一个内置的查询功能

sortResults函数用于排序列表搜索之前显示的结果。

formatSelection函数函数用于呈现当前的选择

formatResult函数函数用来渲染结果,

formatResultCssClass函数函数用于添加css类结果元素

formatNoMatches字符串/函数字符串包含“不匹配”消息,或

函数用于呈现信息

formatSearching字符串/函数字符串包含“搜索… “消息,或

函数用于呈现显示的消息正在进行搜索。

formatAjaxError字符串/函数字符串包含消息“加载失败”,或

函数用于呈现信息

formatInputTooShort字符串/函数包含“搜索”输入太短消息的字符串,或

函数用于呈现信息。

formatInputTooLong字符串/函数包含“搜索”输入太短消息的字符串,或

函数用于呈现信息

formatInputTooLong字符串/函数包含“搜索输入字符串太长”消息,或

函数用于呈现信息。

formatSelectionTooBig字符串/函数字符串包含“你不能选择任何更多的选择”消息,或

函数用于呈现信息

formatLoadMore字符串/函数字符串/函数

createSearchChoice函数创建一个新的可选选择从用户的搜索词。允许创建通过查询选择不可用功能。有用的用户可以创建动态的选择时,如“标签”usecase。

createSearchChoicePosition函数/字符串定义的位置插入元素

initSelection函数调用Select2创建允许用户初始化选择的值 select2附加到元素

tokenizer函数记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取并选择选择。

tokenSeparators函数一个字符串数组定义标记为默认的分隔符分词器功能。默认情况下,此选项设置为一个空数组标记这意味着使用默认编译器是禁用的。通常是明智的,设置该选项值相似 [',',' '] 。

query函数函数用于搜索词的查询结果。

ajax对象选择内置的ajax查询功能。这个对象作为快捷方式有手动编写一个函数,执行ajax请求。内置函数支持更高级的特性,比如节流和无序的反应。

data数组/对象择建在查询功能,使用数组。

tags数组/函数将Select2放入“标签'mode,用户可以添加新的选择和预先存在的标签是通过提供这个选项的属性是一个数组或者一个函数返回一个数组的对象或字符串。如果字符串而不是使用对象他们将有一个被转换成一个对象 id 和文本属性相等的值字符串。

containerCss函数/对象内联css将被添加到select2的容器。一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。

containerCssClass函数/字符串Css类将被添加到select2容器的标签。

dropdownCss函数/对象内联css将被添加到select2下拉的容器。一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。

dropdownCssClass函数/字符串Css类将被添加到select2下拉的容器。

dropdownAutoWidth布尔当设置为真正的尝试自动尺寸下拉基于内容的宽度。

adaptContainerCssClass函数过滤器/重命名的css类,因为他们被复制从源标签select2容器标签

adaptDropdownCssClass函数滤器/重命名的css类,因为他们被复制从源标签select2拉标签

escapeMarkup函数函数用于后处理标记从格式化程序返回功能。默认情况下这个功能转义的html实体,以防止javascript注入。

selectOnBlur布尔设置为真正的如果你想要Select2选择当前高亮选项时模糊。

loadMorePadding整数定义了多少像素需要加载下一页前折以下。默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。这个选项可以用来触发加载更快,可能导致更流畅的用户体验。

nextSearchTerm函数函数用于确定下一个搜索词应该是什么

Example Code（针对目标元素为 div 例如：

...

）

$("#e1").select2();

$("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值

$("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中（好像单个还不行，以数组形式才行）

$("#el").click(function() { $("#e2").select2("val", ""); }); // 不选中任何值

$("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象

$("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });

$("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框

$("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框

$("#e1").select2({placeholder: "Select a state"}); // 下拉框提示

$("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值

$("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); }); // id="CA"，id="MA" 选中

$("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象

$("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });

// 加载数据

$("#e11").select2({

placeholder: "Select report type",

allowClear: true,

data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});

// 加载数组支持多选

$("#e11_2").select2({

createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },

multiple: true,

data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]

});

function log(e) {

var e=$("

"+e+"
");

$("#events_11").append(e);

e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });

}

// 对元素进行事件注册

$("#e11")

.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); }) // 改变事件

.on("select2-opening", function() { log("opening"); }) // select2 打开中事件

.on("select2-open", function() { log("open"); }) // select2 打开事件

.on("select2-close", function() { log("close"); }) // select2 关闭事件

.on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 高亮

.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 选中事件

.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除中事件

.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) // 移除完毕事件

.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");}) // 加载中事件

.on("select2-focus", function(e) { log ("focus");}) // 获得焦点事件

.on("select2-blur", function(e) { log ("blur");}); // 失去焦点事件

$("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });

select2中常见使用方法

$('#mySelect2').select2('destroy');


if ($('#mySelect2').hasClass("select2-hidden-accessible")) {
    // Select2 has been initialized
}

$('#mySelect2').select2('open');


$('#mySelect2').select2('close');


// Set up a Select2 control
$('#example').select2();

// Bind an event
$('#example').on('select2:select', function (e) { 
    console.log('select event');
});

// Destroy Select2
$('#example').select2('destroy');

// Unbind the event
$('#example').off('select2:select');



var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();

$(".js-programmatic-set-val").on("click", function () {
    $example.val("CA").trigger("change");
});

$(".js-programmatic-open").on("click", function () {
    $example.select2("open");
});

$(".js-programmatic-close").on("click", function () {
    $example.select2("close");
});

$(".js-programmatic-init").on("click", function () {
    $example.select2();
});

$(".js-programmatic-destroy").on("click", function () {
    $example.select2("destroy");
});

$(".js-programmatic-multi-set-val").on("click", function () {
    $exampleMulti.val(["CA", "AL"]).trigger("change");
});

$(".js-programmatic-multi-clear").on("click", function () {
    $exampleMulti.val(null).trigger("change");
});






$('#mySelect2').select2({
  closeOnSelect: false
});


https://select2.org/configuration/options-api


closeOnSelect 	boolean 	true



$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});

tags: true,                             // 根据搜索框创建option，默认false
maximumSelectionLength: 6,              // 最多能够选择的个数
multiple: true,                         // 多选，默认false
data: initdata,                         // 下拉框绑定的数据
allowClear: true,                       // 清空，默认false
placeholder: '请添加或选择语言'           // 占位提示符
maximumInputLength: 20,                 // 允许搜索长度  
minimumResultsForSearch: 20,            // 至少20个结果的时候显示搜索  
minimumResultsForSearch: Infinity,      // 永久隐藏搜索框  
selectOnClose: true,                    // 结果显示高亮  
closeOnSelect: false,                   // select选中关闭下拉框  
separator: ",",                         // 分隔符

其他帮助文档：https://blog.csdn.net/u011317027/article/details/62891286

英文文档：

https://select2.org/options

作为程序员一定要保持良好的睡眠，才能好编程

前端开发过程中slect2的使用

更多>> Javascript