Tengo un formulario HTML con un elemento de selección. Sin embargo, estoy usando la biblioteca select2. Quiero escuchar los cambios de entrada de formulario. He agregado un detector de eventos de cambio. Sin embargo, incluso cuando cambio la opción, este evento no se activa. Agregué el activador manualmente, pero aún no se llama a este evento de cambio.
forma
<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'); }Manifestación
https://jsfiddle.net/982zfnkL/6/
Básicamente, cuando hago clic en el botón Cambiar, espero ver el registro de la consola "entrada cambiada".
Por qué está pasando esto ?
como select2 es un componente jquery, debe usar un selector jquery para vincular el evento en él ( $('#xselect') )
ahora puede vincular el evento de cambio con
$('#xselect').on('change', function(e) {su oyente de eventos se verá como
$('#xselect').on('change', function(e) { console.log('input changed '); });aquí está el violín de trabajo 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>Debe vincular el cambio a la selección.
$('#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>Este código se repetirá porque el cambio activará el cambio
var formFrom = document.querySelector('#xform'); formFrom.addEventListener('change', function(e) { console.log('input changed '); $('#xselect').trigger('change'); });Prueba esto:
$('#xselect').on('select2:select', function (e) { var data = e.params.data; console.log(data); });es de la documentación original: https://select2.org/programmatic-control/events