Question: 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 ?

Answer: 
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/>

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

```html
<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>
```
You need to bind the change to the select

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

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

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

```