javascript - Select2 编程访问

Question

我正在使用 jQuery Select2我遇到了设置值和触发事件的问题。

我有一个连接到 Ajax 源的简单 select2 下拉菜单。这工作得很好。

我还有一个等待选择 select2 选项的事件:

 // On project select, we add the projects to the list along with the parties
$('.projSearch').on("select2-selecting", function(e) {

    // Set the value of the project
    var projectID = e.val,
        table = '';

        alert(projectID);
        console.log(e);

      ...

当像往常一样使用 select2 下拉菜单时，此事件工作正常。它会检测您选择的选项的数据。

但是，我还在页面上添加了一个按钮，允许用户设置字段的数据。它可以很好地设置数据，但它永远不会触发事件 select2-selecting。

我尝试将数据与事件一起传递，但当触发 select2-selecting 事件时，它返回 undefined 并不重要。

$(document).on("click", "[name=addProject]", function() {

    // Set the vars
    var projectName = $(this).attr('projectname'),
        projectID = $(this).attr('projectid'),
        projectNameLong = projectName + ' ('+projectID+')';

    // Add the project to the list  
    $("[name=projects]").select2("data", [{id: projectID, text: projectNameLong}]).trigger("select2-selecting", {val: projectID, data: {id: projectID, text: projectNameLong}});

});

如何将数据与触发器一起传递以便我可以在事件中访问它？

感谢您提供任何信息!

Answer 1

选择2 normally triggers the select2-selecting event通过 creating a $.Event object使用包含您要查找的 val 和 data 属性的自定义数据。 The second parameter of .trigger将允许您直接从事件处理程序中获取额外数据，但不会将其附加到事件对象。

$(document).on("click", "[name=addProject]", function() {
    // Set the vars
    var projectName = $(this).attr('projectname'),
        projectID = $(this).attr('projectid'),
        projectNameLong = projectName + ' ('+projectID+')';

    // Create the data object
    var data = {
        id: projectID,
        text: projectNameLong
    };

    // Create the custom event object
    var evt = $.Event("select2-selecting", {
        val: data.id,
        data: data
    });

    // Add the project to the list  
    $("[name=projects]")
        .select2("data", [data])
        .trigger(evt);
});

这应该为您复制原始的 select2-selecting 事件，并允许您重用您的事件处理程序。