jquery插件select2事件不起作用（select2-3.5.4）

jquery插件select2事件不起作用

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年10月8日 09:01:53 星期四

http://fanshuyao.iteye.com/

 

一、官网的说明：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不起作用。

 

三、解决方法：

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

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

 

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

 

jquery.validate.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.

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.

 

 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

蕃薯耀 2015年10月8日 09:01:53 星期四

http://fanshuyao.iteye.com/