jquery Select2下拉式清单变更事件无法运作

j9per5c4  于 2022-12-12  发布在  jQuery
关注(0)|答案(7)|浏览(148)

我正在使用Select2下拉菜单,我需要根据下拉菜单选择执行一些功能。
我已经尝试了下面的代码,但它不为我工作.

$eventSelect.on("select2:select", function (e) { log("select2:select", e); });

$eventSelect.on("change", function (e) { log("change"); });

有谁能告诉我怎么才能让这件事成功吗?

pxyaymoc

pxyaymoc1#

我正在使用select2版本3.3.2,以下代码对我有效

$("#id").on("change", function () { debugger; });
vom3gejh

vom3gejh2#

您可以在知道网页已完全加载后尝试声明事件,在我的示例中,问题就在于此:

$(document).ready(function(){
    $('#yourselect').on("select2:select", function(e) { 
        console.log($(this).val());
    });
});
uplii1fm

uplii1fm3#

尝试此代码

$eventSelect.select2().on("change", function(e) {
          // mostly used event, fired to the original element when the value changes
          log("change val=" + e.val);
        })
slwdgvem

slwdgvem4#

$(document).on('change', '.js-example-basic-single', function(e) {
console.log($(this).val());})
sg24os4d

sg24os4d5#

我可以看到您的代码来自select2文档:
https://select2.github.io/examples.html#programmatic-control
你有没有注意到,他们下面定义了一个函数,代码就是用这个函数叫做log()。
这是函数代码,您是否也包含了它?

function log (name, evt) {
  if (!evt) {
      var args = "{}";
  } else {
      var args = JSON.stringify(evt.params, function (key, value) {
      if (value && value.nodeName) return "[DOM node]";
      if (value instanceof $.Event) return "[$.Event]";
      return value;
      });
  }
  var $e = $("<li>" + name + " -> " + args + "</li>");
  $eventLog.append($e);
  $e.animate({ opacity: 1 }, 10000, 'linear', function () {
      $e.animate({ opacity: 0 }, 2000, 'linear', function () {
          $e.remove();
      });
    });
}

或者,您可以使用console.log()将输出输出到控制台。

sf6xfgos

sf6xfgos6#

对于select2版本4,事件已更改。这是一个旧版本示例

$('#exampleVersionOld').select2().on('change', function(item){
    ...
});

这是一个新版本的例子

$('#exampleVersion4').on('select2:select', function (e) {
    var item = e.params.data;
});

请注意,项目的结构也会随着这个新事件而变更。
以下是所有新事件的列表
https://select2.org/programmatic-control/events

2admgd59

2admgd597#

4.0.0版开始,可以使用以下事件:
参考:https://select2.org/programmatic-control/events
选择2:关闭
选择2:打开
选择2:打开
选择2:选择
选择2:已删除
select2:取消选择
例如:
第一个

相关问题