选择select2后触发动作


79

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

1
您可以绑定到“ change”事件,在您提供的链接上有一个名为“事件”的部分,其中包含用于所有不同事件绑定的非常长的代码段。
罗斯

Answers:


168

请参阅文档事件部分

根据版本的不同,以下摘录之一应为您提供所需的事件,或者仅将“ select2-selecting”替换为“ change”。

版本4.0 +

事件现在采用以下格式:(select2:selecting而不是select2-selecting

感谢snannyy的通知,它从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可能更适合您的需求,具体取决于您是希望选择完成后进行活动,还是可能阻止更改。


13
事件在较新版本中具有其他名称(例如'select2:select'),请参见https://select2.github.io/examples.html
令人讨厌的2015年

1
事件是这里的文档。常见问题解答样式不明显。
皮埃尔·德·莱斯皮奈

1
在设置值之前立即完成“选择”调用。这将导致:“ console.log($(this).val())”输出一个空白值
Joseph Groot Kormelink,

当我在有角度的应用程序中尝试相同的设置时,它给了我错误的值。假设select2选项中有4个值。每天1分钟,5分钟,1小时。现在使用$('#yourselect')。on(“ select2-selecting”,function(e){...}这是给我以前选择的值
Yash Jain

取而代之的是,我尝试了$('#yourselect')。on(“ select2-select”),function(e){...}对我有用
Yash Jain

25

对select2事件名称进行了一些更改(我认为在v。4和更高版本上),因此将'-'更改为此':'
请参阅以下示例:

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

您可以在“ select2”插件站点上检查所有事件: select2事件


13

这个对我有用:

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

我不明白为什么,但是当Tarek的答案不对时,这对我有用。我什至得到了他在一个单独项目中工作的答案,但是由于某种原因,这是使我的项目启动并运行的唯一替代方法。
tokyo0709 '17

@ tokyo0709之所以起作用,是因为.change事件在一系列执行中比select2:select事件来得晚。对我来说,我试图捕获选择的css,select2:select但是即使我在检查器上看到了它,也无法通过捕获它select2:select-当我更改为.change它时,是因为Select2更新原始选择的css之前触发了select2:select事件。 , 在我看来。
a20

1
@ a20有时,一个简单的解决方法是通过html css设置dom元素css,因此您不必等待javascript引擎赶上来。在某些情况下,它运作良好。
yardpenalty.com

7

根据我在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
});

这对我不起作用。我已经将上面的代码更改为如下所示。e.params.args.data
Tushar Saxena

这对我也不起作用,通过找不到未定义数据字段的e.params.data。经过仔细检查,没有为e设置params字段。对于我的问题,我只需要读取值即可,所以e.val对我来说足够了。
NemyaNation

2

对于以上v4

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

0
//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);
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.