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

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.

 

二、官网的使用例子:

 

  1. var $eventLog= $(".js-event-log");
  2. var $eventSelect= $(".js-example-events");
  3.  
  4. $eventSelect.on("select2:open",function(e){ log("select2:open", e);});
  5. $eventSelect.on("select2:close",function(e){ log("select2:close", e);});
  6. $eventSelect.on("select2:select",function(e){ log("select2:select", e);});
  7. $eventSelect.on("select2:unselect",function(e){ log("select2:unselect", e);});
  8.  
  9. $eventSelect.on("change",function(e){ log("change");});

 

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

 

三、解决方法:

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

Js代码   收藏代码
  1. $("#xxx").on("select2-close"function (e) {  
  2.       
  3. });  

 

原来是select2-close,中间的不是冒号,而是 - (横杠),修改后就能使用了

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

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

Js代码   收藏代码
  1. $("#genders").on("select2-close"function (e) {  
  2.     $(this).valid();  
  3. });  

 

 最终原因是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> )

  1. $("#e1").select2(); 
  2. $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
  3. $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中(好像单个还不行,以数组形式才行)
  4. $("#el").click(function() { $("#e2").select2("val", ""); });  // 不选中任何值
  5. $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
  6. $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
  7. $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
  8. $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
  9. $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
  10. $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
  11. $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA",id="MA" 选中
  12. $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
  13. $("#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");});     //  失去焦点事件


点关注,不迷路

文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️ 
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!

 

  • 5
    点赞
  • 7
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值