Activar una acción después de la selección select2


79

Estoy usando la biblioteca select2 para mi búsqueda.
¿Hay alguna forma de activar una acción después de seleccionar un resultado de búsqueda? por ejemplo, abra una ventana emergente o una simple alerta js.

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

1
Puede enlazar al evento 'cambiar', hay una sección llamada "Eventos" en el enlace que proporcionó con un fragmento de código muy largo para todos los enlaces de eventos diferentes.
Ross

Respuestas:


170

Ver la sección de eventos de documentación

Dependiendo de la versión, uno de los fragmentos a continuación debería proporcionarle el evento que desea; alternativamente, simplemente reemplace "select2-selected" con "change".

Versión 4.0 +

Los eventos ahora están en formato: select2:selecting(en lugar de select2-selecting)

Gracias a Snakey por la notificación de que esto ha cambiado a partir de la 4.0.

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

Versión anterior a 4.0

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

Solo para aclarar, la documentación para select2-selectingdice:

select2-selected Se activa cuando se selecciona una opción en el menú desplegable, pero antes de que se haya realizado ninguna modificación en la selección. Este evento se usa para permitir al usuario rechazar la selección llamando a event.preventDefault ()

mientras que el cambio tiene:

cambiar Se dispara cuando se cambia la selección.

Por changelo tanto, puede ser más apropiado para sus necesidades, dependiendo de si desea que la selección se complete y luego realice su evento, o potencialmente bloquear el cambio.


13
Los eventos tienen otros nombres en versiones más recientes (por ejemplo, 'select2: select'), consulte https://select2.github.io/examples.html
snakey

1
Los eventos están aquí en el doc. No es obvio con el estilo de preguntas frecuentes.
Pierre de LESPINAY

1
la llamada de "selección" se realiza justo antes de que se establezca el valor. que conducirá a: "console.log ($ (this) .val ())" generando un valor en blanco
Joseph Groot Kormelink

Cuando intenté lo mismo en mi aplicación angular, me estaba dando valores incorrectos. Suponga que hay 4 valores en las opciones select2. 1 minuto, 5 minutos, 1 hora, diario. Ahora usando $ ('# yourselect'). On ("select2-selected", function (e) {...} Me estaba dando el valor anterior de lo que he seleccionado.
Yash Jain

En lugar de eso, probé $ ('# yourselect'). On ("select2-select"), function (e) {...} Eso funcionó para mí
Yash Jain

25

Se realizaron algunos cambios en los nombres de los eventos de select2 (creo que en la versión 4 y posteriores), por lo que el '-' se cambia a este ':' .
Vea los siguientes ejemplos:

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

Puede consultar todos los eventos en el sitio del complemento 'select2': eventos select2


13

Esto funciona para mi:

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});

No entiendo por qué, pero esto funcionó para mí cuando la respuesta de Tarek no lo haría. Incluso obtuve su respuesta para trabajar en un proyecto separado, pero por alguna razón esta fue la única anulación que hizo que mi proyecto estuviera en funcionamiento.
tokyo0709

@ tokyo0709 Funciona porque el .changeevento llega más tarde en la serie de ejecuciones que el select2:selectevento. Para mí, estaba tratando de capturar el css de la selección select2:selectpero, aunque lo vi en el inspector, no pude capturarlo a través de select2:select; cuando lo cambié .changefuncionó porque Select2 activa el select2:selectevento antes de actualizar el css para la selección original ... un poco loco , en mi opinión.
a20

1
@ a20 a veces una solución fácil es configurar los elementos dom css a través de html css para que no tenga que esperar a que el motor javascript se ponga al día. Funciona bien en algunos casos.
yardpenalty.com

7

Según mi uso anterior v.4, esto funcionará

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

Y por menos de la v.4 esto funcionará:

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});

Esto no funcionó para mí. He cambiado el código anterior como se indica a continuación. e.params.args.data
Tushar Saxena

Esto tampoco funcionó para mí, e.params.data a través del campo de datos no encontrado para indefinido. Tras una inspección más cercana, no había ningún campo de parámetros configurado para e. Para mi problema, solo necesitaba leer el valor para que e.val fuera suficiente para mí.
NemyaNation


0
//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.