选择后触发动作select2(Trigger an action after selection select2)

选择后触发动作select2(Trigger an action after selection select2)

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

I am using select2 library for my search. is there any way to trigger an action after selecting a search result? e.g. open a popup, or a simple js alert.

$("#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 });

最满意答案

请参阅文档中的事件部分或有关事件的更多详细信息部分 。

根据版本，下面的代码片段应该给你所需的事件，或者只是用“更改”替换“select2-selection”。

版本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可能更适合您的需求，具体取决于您是否要选择完成，然后执行您的活动，或可能阻止更改。

See the documentation events section

Depending on the version, one of the snippets below should give you the event you want, alternatively just replace "select2-selecting" with "change".

Version 4.0 +

Events are now in format: select2:selecting (instead of select2-selecting)

Thanks to snakey for the notification that this has changed as of 4.0

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

Version Before 4.0

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

Just to clarify, the documentation for select2-selecting reads:

select2-selecting Fired when a choice is being selected in the dropdown, but before any modification has been made to the selection. This event is used to allow the user to reject selection by calling event.preventDefault()

whereas change has:

change Fired when selection is changed.

So change may be more appropriate for your needs, depending on whether you want the selection to complete and then do your event, or potentially block the change.