select2 未正确触发更改事件

Question

我有一个带有选择元素的 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');
});