Jquery 选择select2后触发操作

Jquery 选择select2后触发操作,jquery,search,jquery-select2,Jquery,Search,Jquery Select2,我正在使用进行搜索。 在选择搜索结果后是否有任何方法触发操作?e、 g.打开弹出窗口或简单的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

我正在使用进行搜索。
在选择搜索结果后是否有任何方法触发操作?e、 g.打开弹出窗口或简单的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
});

根据版本的不同,下面的一个代码段应该会为您提供所需的事件,或者将“select2 selecting”替换为“change”

版本4.0+

事件现在的格式为:
select2:selection
(而不是
select2-selection

感谢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选择的文档如下所示:

选择2选择 在中选择选项时激发 下拉列表,但在对选择进行任何修改之前。 此事件用于允许用户通过调用拒绝选择 event.preventDefault()

鉴于变化:

改变 更改选择时激发


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

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

$('#select').on("select2:select", function(e) { 
    //Do stuff
});
您可以在“select2”插件站点查看所有事件:

这对我很有用:

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

根据我在第4节上面的用法,这个可以用了

$('#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 
});
这对我很有用(选择2 4.0.4):


您可以绑定到“更改”事件,在您提供的链接上有一个名为“事件”的部分,其中包含所有不同事件绑定的很长代码段。事件在较新版本中有其他名称(例如“select2:select”),请参阅文档中的事件。对于FAQ样式,不明显。在设置值之前立即完成“选择”调用。这将导致:“console.log($(this.val())”输出一个空值。当我在angular应用程序中尝试相同操作时,它给了我错误的值。假设select2选项中有4个值。每天1分钟,5分钟,1小时。现在使用$('#yourselect')。在('select2 selection',函数(e){…}上,它给了我以前选择的值。我尝试了$('#yourselect')。在('select2 select'),函数(e){…}我不明白为什么这对我有效,而塔瑞克的答案却不起作用。我甚至得到了他的答案,在一个单独的项目中工作,但出于某种原因,这是唯一一个使我的项目启动并运行的覆盖。@tokyo0709它有效,因为
.change
事件在一系列执行中比
select2:sel来得晚ect
事件。对于我来说,我试图在
select2:select
上捕获select的css,但即使我在inspector上看到它,我也无法通过
select2:select
捕获它-当我更改为
时。更改
它起作用,因为select2在更新原始select的css之前触发
select2:select
事件在我看来,这太疯狂了。有时一个简单的解决方法是通过html css设置dom元素css,这样你就不必等待javascript引擎赶上。它在某些情况下工作得很好。这对我来说不起作用。我将上面的代码改为下面给出的代码。
e.params.args.data
这对我也不起作用,e.params.data不起作用hr未找到未定义的数据字段。仔细检查后,没有为e设置参数字段。对于我的问题,我只需要读取值,这样e.val对我来说就足够了。它工作正常。谢谢
//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);
});
$(document).on('change', 'select#your_id', function(e) {
    // your code
    console.log('this.value', this.value);
});