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').on('change', function(e) {

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