82

我正在使用select2 库进行搜索。
选择搜索结果后有什么方法可以触发动作吗？例如打开一个弹出窗口，或者一个简单的 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
});
4

7 回答 7

173

请参阅文档事件部分

根据版本，下面的片段之一应该为您提供所需的事件，或者只需将“select2-selecting”替换为“change”。

版本 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-selecting 在下拉列表中选择选项时触发，但在对选择进行任何修改之前。此事件用于允许用户通过调用 event.preventDefault() 来拒绝选择

而变化有：

更改选择更改时触发。

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

于 2013-09-04T13:30:54.503 回答
27

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

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

您可以在“select2”插件站点查看所有事件： select2 Events

于 2016-04-10T19:17:26.533 回答
13

这个对我有用：

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});
于 2017-09-15T14:12:46.013 回答
9

根据我在 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
});
于 2018-09-25T15:42:46.103 回答
3

这对我有用（Select2 4.0.4）：

$(document).on('change', 'select#your_id', function(e) {
    // your code
    console.log('this.value', this.value);
});
于 2021-01-23T15:06:24.583 回答
2

对于以上 v4

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});
于 2019-01-07T22:26:11.110 回答
0 
//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);
});
于 2020-07-17T05:38:48.793 回答