Question

我正在使用select2 library进行搜索有没有办法在选择搜索结果后触发操作？例如打开弹出窗口或简单的js警报。

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

Answer 1

请参阅documentation events section

根据版本的不同，下面的其中一个片段应该为您提供所需的活动，或者只需将“select2-selecting”替换为“更改”。

版本4.0 +

事件现采用格式：select2:selecting（而不是select2-selecting）

感谢snakey通知自4.0以来这已经发生变化

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

版本4.0之前

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

为了澄清，select2-selecting的文档是：

SELECT2-选择在选择中选择时触发下拉列表，但在对选择进行任何修改之前。此事件用于允许用户通过调用拒绝选择 event.preventDefault（）

而变化有：

变化选择更改时触发。

所以change可能更适合您的需求，具体取决于您是希望完成选择然后执行您的活动，还是可能会阻止更改。

Answer 2

对select2事件名称进行了一些更改（我认为在第4版及更高版本中），因此' - '更改为此'：'。
请参阅下一个示例：

var pageData;

function setPageData (product) {
    pageData = new Observable({
        units: restClientUnits.viewModelArray,
        vatpercentages: restClientVatPercentages.viewModelArray,
        product: product
    });
    loadLists();
}

function receiveNotification(args) {
    console.log("Notification received...");
    console.log(args.propertyName);
    console.log(args.value.unit);
}

exports.loaded = function(args) {
    var page = args.object;
    var product = page.navigationContext;
    //Extra listener just to check if notification is send
    product.addEventListener(Observable.propertyChangeEvent, receiveNotification, this);
    setPageData(product);
    page.bindingContext = pageData;
};

exports.unitTap = function() {
    var unitNames = [];
    pageData.get("units").forEach(function(unit) {
       unitNames.push(unit.get("unit"));
    });
    dialogs.action({
        message: "Select unit",
        cancelButtonText: "Cancel",
        actions: unitNames,
    }).then(function (result) {
        pageData.get("units").forEach(function(obj) {
                if (obj.unit === result) {
                    pageData.get("product").set("unit", obj);
                }
        });
        console.log("New set unit: " + pageData.get("product").get("unit").unit);
        console.log("Dialog result: " + result)
    });
};

您可以在'select2'插件网站上查看所有活动： select2 Events

Answer 3

它对我有用：

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});

Answer 4

这对我有用（Select2 4.0.4）：

$(document).on('change', 'select#your_id', function(e) {
    // your code
    console.log('this.value', this.value);
});

Answer 5

按照我在v.4以上的用法，它将起作用

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

v.4以下的版本将起作用：

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});

Answer 6

对于v4以上版本

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});

Answer 7

//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

选择select2后触发一个动作

7 个答案: