CODEWITHSUNDEEP
javascripthtmljqueryformsjquery-select2
while true
while true

Reputation: 856

select2 doesn't trigger change event correctly

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" 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');
}

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 ?

Upvotes: 2

Views: 11094

Answers (4)

Pawan
Pawan

Reputation: 51

As per the Github Issue 1908 "Standard (native) JS events are no longer emitted in v4". But if you necessarily need to use JS events and event listeners in your code, you can use the following approach.

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

In the above code, we deliberately trigger a change event when an option is selected in the Select2 dropdown. You can also change the initial selector $('#xselect') to something like $('.select-2') to apply the trigger to all the other Select2 dropdowns.

Upvotes: 2

mplungjan
mplungjan

Reputation: 177685

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" class="input-text" 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');
});

Upvotes: 1

jeremy-denis
jeremy-denis

Reputation: 6878

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

</form>

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

Upvotes: 8

zbyso
zbyso

Reputation: 118

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

Upvotes: 1

Related Questions