如何在 select2 上触发事件

Question

大家好，我的销售商品页面中有一些 select 标签。第一个由 HTML 创建，其他由 jquery 创建当用户单击按钮时追加添加更多

<select id='code0' onclick='getvalue(this)'><option>1</option></select>

并且在 document.ready 中，我在此 select 标签上应用 select2

$(document).ready(function(){
 $("#code0").select2();
})


function append(){
  $("table").append("<tr><td><select id='code1' onclick='getvalue(this)'><option>1</option></select></td></tr>");
  $("#code1").select2();
}

下一个附加的 select 的 ID 为 code2。我管理它没有任何问题

现在，函数 getvalue() 在应用 select2 之前工作正常，但在应用 select2 之后，select 不会触发点击或任何事件。应用 select 2;

后如何触发事件

function getvalue(item){
  alert("event triggered"); // to check that jquery called this function or not
  console.log(item.value);
}

点击 select 标签没有调用获取值函数；

每当页面加载时，我都会在控制台上看到此错误

jQuery-2.1.4.min.js:2 Uncaught TypeError: Cannot read property 'call' of null
    at Function.each (jQuery-2.1.4.min.js:2)
    at MutationObserver.<anonymous> (select2.min.js:2)

Answer 1

将 select2 链接到现有 select 后。

select2 覆盖 select 并为所有选项创建列表 (li)，并且隐藏 select。

因此添加到 select 的任何事件都不会直接起作用。

Select2 插件提供了可用于满足您需要的功能

将 select2 ele 分配为 var 并使用插件提供的方法

var select2Ele = $("#code0").select2();

select2Ele.on("select2:select", function (event) {
   // after option is selected 
});

select2Ele.on("select2:selecting", function (event) {
   // before selection 
});

对于多个 select2，上面的代码将像这样工作。在日志方法中，我们有事件可用于获取当前元素值和其他内容

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

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();
    });
  });
}

参考select2 doc

如何在 select2 上触发事件

how to trigger event on select2

html

javascript

jquery

jquery-select2-4