select2 未正确触发更改事件

Question

我有一个带有 select 元素的 HTML 表单。不过我正在使用 select2 库。我想监听表单输入的变化。我添加了一个更改事件侦听器。但是，即使我更改选项，该事件也不会被触发。我已经手动添加了触发器，但仍然没有调用此更改事件。

形式

<form id="xform">

<select id="xselect">
  <option value="A" selected="selected">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<input type="email" class="input-text" name="test"  placeholder="" value="test">

</form>

<button onclick="trigger()">change</button>

js

$('#xselect').select2({
  placeholder: 'Select a letter'
});

var formFrom = document.querySelector('#xform');

formFrom.addEventListener('change', function(e) {
  console.log('input changed ');
  $('#xselect').trigger('change');
});

function trigger() {
  $('#xselect').val('C');
  $('#xselect').trigger('change');
}

演示

https://jsfiddle.net/982zfnkL/6/

基本上，当我单击更改按钮时，我希望看到“输入已更改”控制台日志。

为什么会出现这种情况？

Answer 1

就像 select2 是一个 jquery 组件一样，你必须使用 jquery 选择器在其上绑定事件 (

$('#xselect')

)

您现在可以使用

绑定更改事件

$('#xselect').on('change', function(e) {

你的事件监听器看起来像这样

$('#xselect').on('change', function(e) {
  console.log('input changed ');
});

这是工作小提琴https://jsfiddle.net/kLv9pb4t/

$('#xselect').select2({
  placeholder: 'Select a letter'
});

var formFrom = document.querySelector('#xform');

  $('#xselect').on('change', function(e) {
    console.log('input changed ');
  });

function trigger() {
  $('#xselect').val('C');
  $('#xselect').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<form id="xform">

<select id="xselect">
  <option value="A" selected="selected">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<input type="email" class="input-text" name="test"  placeholder="" value="test">

</form>

<button onclick="trigger()">change</button>

Answer 2

试试这个：

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

来自原始文档：https://select2.org/programmatic-control/events

Answer 3

您需要将更改绑定到选择

$('#xselect').select2({
  placeholder: 'Select a letter'
})
.on('change', function(e) {
  console.log('input changed ');
});

function trigger() {
  $('#xselect').val('C');
  $('#xselect').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">

<form id="xform">

  <select id="xselect">
    <option value="A" selected="selected">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>

  <input type="email" class="input-text" name="test" placeholder="" value="test">

</form>

<button onclick="trigger()">change</button>

此代码将循环，因为更改将触发更改

var formFrom = document.querySelector('#xform');

formFrom.addEventListener('change', function(e) {
  console.log('input changed ');
  $('#xselect').trigger('change');
});

Answer 4

根据 Github Issue 1908“v4 中不再发出标准（本机）JS 事件”。但如果你的代码中一定需要使用 JS 事件和事件监听器，你可以使用下面的方法。

$('#xselect').on('select2:select', function (event) {
   event.target.dispatchEvent(new Event("change"))
});

在上面的代码中，当在 Select2 下拉列表中选择一个选项时，我们故意触发一个更改事件。您还可以将初始选择器

$('#xselect')

更改为

$('.select-2')

之类的内容，以将触发器应用于所有其他 Select2 下拉列表。