Select2 下拉更改事件不起作用

Question

我正在使用Select2下拉菜单，我需要根据下拉菜单选择执行一些功能。

我尝试了以下代码，但它对我不起作用。

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

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

谁能告诉我怎样才能使这项工作？

Answer 1

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

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

Answer 2

您可以在知道网页已完全加载后尝试声明事件，在我的情况下，这就是问题所在：

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

Answer 3

试试这个代码

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

Answer 4

我可以看到你从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（）输出到控制台。

Answer 5

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

Answer 6

使用 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

Answer 7

从版本4.0.0开始，可以使用以下事件：

参考： https://select2.org/programmatic-control/events

选择2：关闭
选择2：打开
select2:开场
选择2：选择
选择2：删除
选择2：取消选择

例如：

 (function($){ $('.select2').select2(); $('.select2').on('select2:selecting', function(e) { console.log('Selecting: ', e.params.args.data); }); })(jQuery);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <select class="select2"> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select>