事件

当使用该组件执行不同的操作时,Select2将触发一些不同的事件,使您可以添加自定义钩子并执行操作。您也可以使用以下命令在Select2控件上手动触发这些事件 .trigger.

事件 描述
change 每当一个选项被选择或删除触发。
change.select2 范围版change。有关更多详细信息,请参见下文。
select2:closing 在关闭下拉菜单之前触发。可以防止此事件。
select2:close 每当下拉列表关闭时触发。select2:closing 在此之前被解雇,可以预防。
select2:opening 在下拉列表打开之前触发。可以防止此事件。
select2:open 每当下拉列表打开时触发。 select2:opening在此之前被解雇,可以预防。
select2:selecting 在选择结果之前触发。可以防止此事件。
select2:select 每当选择了结果触发。select2:selecting 在此之前被解雇,可以预防。
select2:unselecting 在删除选择之前触发。可以防止此事件。
select2:unselect 每当删除选择时触发。select2:unselecting在此之前被解雇,可以预防。
select2:clearing 在清除所有选择之前触发。可以防止此事件。
select2:clear 清除所有选择时触发。select2:clearing 在此之前被解雇,可以预防。

倾听事件

所有公共事件都使用jQuery事件系统进行中继,并在<select>Select2附加到的元素。您可以使用jQuery提供的.on 方法将其附加:

$('#mySelect2').on('select2:select', function (e) {
  // 做点什么
});

事件数据

什么时候 select2:select 触发后,可以通过 params.data 属性:

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

e.params.data 将返回一个包含选择属性的对象。数据源中提供的用于选择的任何其他数据也将包括在此对象中。例如:

{
  "id": 1,
  "text": "Tyto alba",
  "genus": "Tyto",
  "species": "alba"
}

触发事件

您可以使用jQuery在Select2控件上手动触发事件 trigger 方法。但是,如果您要将一些数据传递给该事件的任何处理程序,则需要构造一个新的 jQuery Event 对象并以此触发:

var data = {
  "id": 1,
  "text": "Tyto alba",
  "genus": "Tyto",
  "species": "alba"
};

$('#mySelect2').trigger({
    type: 'select2:select',
    params: {
        data: data
    }
});

限制范围 change 事件

其他组件通常会听取 change事件,或者附加可能有副作用的自定义事件处理程序。要限制范围仅通知Select2更改,请使用.select2事件名称空间:

$('#mySelect2').val('US'); // 更改值或对内部状态进行一些更改
$('#mySelect2').trigger('change.select2'); // 仅通知Select2更改

例子

    
    
    

    预防事件

    参见 https://stackoverflow.com/a/26706695/2970321.

    内部Select2事件

    Select2具有一个内部事件系统,该系统独立于DOM事件系统而工作,从而允许适配器彼此通信。只能通过连接到Select2的插件和适配器访问此内部事件系统,而不能通过jQuery事件系统访问。

    您可以在高级一章中找到有关各个适配器触发的公共事件的更多信息。