在选择 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
});
184664 次浏览

看看 文件事件部分

根据版本的不同,下面的一个代码片段应该提供您想要的事件,或者只是将“ select2-select”替换为“ 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-选择 中选择选项时触发 下拉列表,但是在对选定内容进行任何修改之前。 此事件用于允许用户通过调用 Event.preventDefault ()

而变化则是:

改变 更改选定内容时触发。

因此,change可能更适合您的需要,这取决于您是希望选择完成然后执行事件,还是可能阻止更改。

对 select2事件名称做了一些修改(我认为是在第4节和更高版本中) ,所以 '-'变成了这个 ':'
请看下面的例子:

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

你可以在“ select2”插件网站上查看所有事件: Select2事件

这对我很有用:

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

根据我在第四节以上的使用情况,这个会有用的

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

少于4节的话,这个可以用:

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

对于以上的 v4

$('#yourselect').on("select2:select", function(e) {
// after selection of select2
});
//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);
});

这对我很有用(选择24.0.4) :

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