select2 doesn't trigger change event correctly-CodePudding

I have a HTML form with a select element. However I'm using select2 library. I want to listen for form input changes. I have added a change event listener. However even when I change the option this event is not getting triggered. I have added trigger manually but still this change event is not getting called.

form

<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"  name="test"  placeholder="" value="test">

</form>

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

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

Demo

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

Basically when I click the change button i expect to see "input changed" console log.

Why is this happening ?

CodePudding user response：

like select2 is a jquery component you have to use a jquery selector to bind event on it ($('#xselect'))

you can now bind change event with

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

your event listener will look like

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

here is the working fiddle 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"  name="test"  placeholder="" value="test">

</form>

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

CodePudding user response：

You need to bind the change to the select

$('#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"  name="test" placeholder="" value="test">

</form>

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

This code will loop because the change will trigger change

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

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

CodePudding user response：

Try this:

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

it's from original documentation: https://select2.org/programmatic-control/events