jquery插件select2的所有事件，包括清除，删除，打开等

最新推荐文章于 2024-04-18 09:43:47 发布

蒋老湿

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量6.6w

点赞数 6

分类专栏： select2 文章标签： select2 jquery jquery插件 javascript

本文链接：https://blog.csdn.net/jiangeeq/article/details/52457351

版权

select2 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、官网的说明：https://select2.github.io/examples.html（Version 4.0.0）

change is fired whenever an option is selected or removed.

select2:open is fired whenever the dropdown is opened. select2:opening is fired before this and can be prevented.

select2:close is fired whenever the dropdown is closed. select2:closing is fired before this and can be prevented.

select2:select is fired whenever a result is selected. select2:selecting is fired before this and can be prevented.

select2:unselect is fired whenever a result is unselected. select2:unselecting is fired before this and can be prevented.

二、官网的使用例子：

var $eventLog= $(".js-event-log");
var $eventSelect= $(".js-example-events");
$eventSelect.on("select2:open",function(e){ log("select2:open", e);});
$eventSelect.on("select2:close",function(e){ log("select2:close", e);});
$eventSelect.on("select2:select",function(e){ log("select2:select", e);});
$eventSelect.on("select2:unselect",function(e){ log("select2:unselect", e);});
$eventSelect.on("change",function(e){ log("change");});

但是在实际应用中select2:close不起作用。

三、解决方法：

这个原因找了很久都没有找到，昨天终于发现原因了：

Js代码

$("#xxx").on("select2-close", function (e) {
});

原来是select2-close，中间的不是冒号，而是 - （横杠），修改后就能使用了

伦理片 http://www.dotdy.com/

jquery.validate.js插件也能完善校验。

Js代码

$("#genders").on("select2-close", function (e) {
$(this).valid();
});

最终原因是select2的版本问题

在3.5.4版本中的事件为：

Events

change

Fired when selection is changed.

The event object contains the following custom properties:

val

The current selection (taking into account the result of the change) - id or array of ids.

added

The added element, if any - the full element object, not just the id.

removed

The removed element, if any - the full element object, not just the id.

select2-opening

Fired before the dropdown is shown.

The event listener can prevent the opening by calling preventDefault() on the supplied event object.

select2-open

Fired after the dropdown is shown.

select2-close

Fired after the dropdown is closed.

select2-highlight

Fired when a choice is highlighted in the dropdown.

The event object contains the following custom properties:

val

The id of the highlighted choice object.

choice

The highlighted choice object.

select2-selecting

Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject selection by calling event.preventDefault()

The event object contains the following custom properties:

val

The id of the highlighted choice object.

choice

The choice object about to be selected.

select2-clearing

Fired when a choice is being cleared in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject the clear by calling event.preventDefault()

For the clear button to be visible the allowClear option needs to be true.

影音先锋电影 http://www.iskdy.com/

select2-removing

Fired when a choice is about to be removed in the dropdown/input, but before any removal of the choice has been made. This event is used to allow the user to reject removal by calling event.preventDefault()

The event object contains the following custom properties:

val

The id of the removing choice object.

choice

The choice object about to be removed.

select2-removed

Fired when a choice is removed or cleared.

The event object contains the following custom properties:

val

The id of the highlighted choice object.

choice

The highlighted choice object.

select2-loaded

Fired when query function is done loading the data and the results list has been updated

The event object contains the following custom properties:

items

data that was used to populate the results.

select2-focus

Fired when the control is focussed.

select2-blur

Fired when the control is blurred.

Example Code（针对目标元素为 div 例如：<div id="e1">...</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=$("<li>"+e+"</li>");

$("#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");}); // 失去焦点事件