select2api参数中⽂⽂档具体参数可以参考⼀下:
参数
类型描述
Width字符串控制 宽度 样式属性的Select2容器div
minimumInputLengthint最⼩数量的字符
maximumInputLengthint最⼤数量的字符
minimumResultsForSearchInt最⼩数量的结果
maximumSelectionSizeint可选择的最⼤条⽬数
placeholder字符串选择初始值
separator字符串分隔符字符或字符串⽤来划定id
allowClear布尔此选项只指定占位符
multiple布尔Select2是否允许选择多个值
cssclass属性
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函数记号赋予器函数可以处理后输⼊搜索框的输⼊每⼀个按键和提取 并选择选择。
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() { 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, ved})); })  // 改变事件.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"); });
转⾃blog.csdn/StoneEpigraph/article/details/76409408

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。