Obtener valores seleccionados con Select2

Obtener ID y Text de selección en Select2Select2 es un plugin para jQuery muy útil y aquí te muestro cómo obtener el valor seleccionado, tanto el ID, como el texto, ya sea en un select multiple o sencillo.

Voy a suponer que ya está jQuery y select2 previamente cargados, y digamos que tenemos el siguiente código, en este caso es de un select múltiple:

<select class="select2_multiple" multiple="multiple" name="miselect">
<option value="1>Mi valor uno</option>
<option value="2">Mi valor dos</option>
<option value="3">Mi valor tres</option>
</select> 

Con el siguiente código JS obtenemos el valor, o los valores seleccionados en “.select2_multiple”:

$('.select2_multiple').on("select2:select", function (e) {
 console.log("ID seleccionado: " + e.params.data.id);
 });

La función “select2:select” se dispara cuando es seleccionado un elemento del resultado y los datos los almacenamos en “e.params.data”.

Dentro de e.params.data podemos obtener los datos ID y text:

e.params.data.id

e.params.data.text

Y listo, podemos guardar estos datos en otros inputs o lo que necesiten.

Existen otras funciones como:

  • select2:open Se dispara cuando se abre el dropdown.
  • select2:close Se dispara cuando se cierra el dropdown.
  • select2:unselect Se dispara cuando se desselecciona algún elemento.