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