jQuery 选择 select2 后触发一个动作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18615108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger an action after selection select2
提问by spyfx
I am using select2 libraryfor 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.
我正在使用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
});
回答by Ross
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".
根据版本，下面的片段之一应该为您提供所需的事件，或者只需将“select2-selecting”替换为“change”。
Version 4.0 +
版本 4.0 +
Events are now in format: select2:selecting(instead of select2-selecting)
事件现在采用以下格式：（select2:selecting而不是select2-selecting）
Thanks to snakey for the notification that this has changed as of 4.0
感谢snakey通知4.0这已经改变了
$('#yourselect').on("select2:selecting", function(e) {
// what you would like to happen
});
Version Before 4.0
4.0之前的版本
$('#yourselect').on("select2-selecting", function(e) {
// what you would like to happen
});
Just to clarify, the documentation for select2-selectingreads:
只是为了澄清，文档select2-selecting如下：
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()
select2-selecting 在下拉列表中选择一个选项时触发，但在对选择进行任何修改之前触发。此事件用于允许用户通过调用 event.preventDefault() 拒绝选择
whereas change has:
而变化有：
change Fired when selection is changed.
更改选择更改时触发。
So changemay 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.
因此change可能更适合您的需求，具体取决于您是希望选择完成然后执行您的活动，还是可能阻止更改。
回答by Tarek
There was made some changes to the select2 events names (I think on v. 4 and later) so the '-'is changed into this ':'.
See the next examples:
对 select2 事件名称进行了一些更改（我认为在第 4 版及更高版本中），因此'-'更改为':'。
请参阅以下示例：
$('#select').on("select2:select", function(e) {
//Do stuff
});
You can check all the events at the 'select2' plugin site: select2 Events
您可以在“select2”插件站点查看所有事件： select2 Events
回答by Roby Sottini
It works for me:
这个对我有用：
$('#yourselect').on("change", function(e) {
// what you would like to happen
});
回答by amku91
As per my usage above v.4 this gonna work
根据我上面 v.4 的用法，这会起作用
$('#selectID').on("select2:select", function(e) {
//var value = e.params.data; Using {id,text format}
});
And for less then v.4 this gonna work:
并且少于 v.4 这会起作用：
$('#selectID').on("change", function(e) {
//var value = e.params.data; Using {id,text} format
});
回答by Solution Spirit
For above v4
对于 v4 以上
$('#yourselect').on("select2:select", function(e) {
// after selection of select2
});
