一、官网的说明: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不起作用。
三、解决方法:
这个原因找了很久都没有找到,昨天终于发现原因了:
- $("#xxx").on("select2-close", function (e) {
- });
原来是select2-close,中间的不是冒号,而是 - (横杠),修改后就能使用了
伦理片 http://www.dotdy.com/
jquery.validate.js插件也能完善校验。
- $("#genders").on("select2-close", function (e) {
- $(this).valid();
- });
最终原因是select2的版本问题
在3.5.4版本中的事件为:
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-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-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"}]); });
-
placeholder: "Select report type",allowClear: true,data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
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");}); // 失去焦点事件
点关注,不迷路
文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!