选择select2后触发一个动作

Question

我正在使用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
});

Answer 1

请参阅文档事件部分

根据版本的不同,下面的一个片段应该为您提供所需的事件,或者只需将"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-selection在下拉列表中选择选项时,但在对选择进行任何修改之前触发.此事件用于允许用户通过调用event.preventDefault()来拒绝选择

而变化有:

更改选择更改时触发.

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

Answer 2

对select2事件名称进行了一些更改(我认为在第4版及更高版本中),因此' - '更改为此':'.
请参阅下面的示例:

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

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

Answer 3

这个对我有用:

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

Answer 4

根据我上面 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 5

对于 v4 以上版本

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

Answer 6

这对我有用（Select2 4.0.4）：

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