Select2 编程访问

Question

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

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

我还有一个事件等待选择 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 下拉菜单时，此事件运行良好。它检测您 select.

选项的数据

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

我尝试将数据与事件一起传递，但不管什么时候 select2-selecting 事件被触发，它 returns 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

Select2 normally triggers the select2-selecting event by creating a $.Event object with the custom data containing the val and data attributes that you are looking for. 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 事件，并允许您重复使用您的事件处理程序。

Select2 编程访问

Select2 Programmatic Access

javascript

jquery

jquery-select2