jQuery select2 obtiene el valor de la etiqueta de selección?


95

Hola amigos este es mi código:

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

Este es mi código select2:

$("#first").select2();

A continuación se muestra el código para obtener el valor seleccionado.

$("#first").select2('val'); // It returns first,second,three.

Esto es devolver un texto como first,second,threey quiero obtener 1,2,3.
Significa que necesito el valor del cuadro de selección, no el texto.


¿Puede proporcionar un JSFiddle? Sería muy útil.
Ionică Bizău

1
la pregunta no está clara. exactamente que quieres?
Hiral

Respuestas:


148
$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

5
$ ("# primero"). val (); // devuelve 1,2,3 OR $ ("# primero"). select2 ('val'); // vuelve primero, segundo, tres
Renish Khunt

$ ("# primero"). val (); devolverá 1,2,3 (el que esté seleccionado) y puede publicar el código en la función select2 () para obtener más detalles.
Algo

para una selección llamada por nombre de identificación en lugar de nombre de clase, use: $ (". first"). val ()
Rui Martins

@RuiMartins mal. Los ID se llaman con "#" y las clases se llaman con ".", Así que para llamar por ID, usarías $ ("# primero"). Val () y para CLASS usarías $ (". Primero" ) .val ()
Source Matters

58

Para obtener el elemento Seleccionar puede usar $('#first').val();

Para obtener el texto del valor seleccionado: $('#first :selected').text();

¿Puedes publicar tu select2()código de función?


1
$ ("# primero"). val (); // devuelve 1,2,3 OR $ ("# primero"). select2 ('val'); // vuelve primero, segundo, tres
Renish Khunt

No estoy seguro, entendí tu pregunta.
Krish R

1
cuando utilicé el complemento select2, obtengo valor usando $ ("# primero"). val (). no devuelve nada, vuelve en blanco.
Renish Khunt

¿Puede proporcionar un ejemplo de violín con su complemento?
Krish R

1
Tuve que usar $('#first :selected').text();la otra opción para devolver todas las opciones posibles.
Jeff Bluemel

35

$("#first").select2('data') devolverá todos los datos como mapa


1
Muy útil si tiene propiedades adicionales en los objetos seleccionados2
Zapato

9

Si está utilizando ajax , es posible que desee obtener el valor actualizado de select justo después de la selección.

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

Créditos: Steven-Johnston


Hola, ¿puedo saber de dónde currentTargetviene? ninguno de sus ejemplos de ID / nombre está relacionado con la Pregunta. Entonces no puedo relacionarme en ningún lado.
mastersuse

8

Esta solución le permite olvidar el elemento seleccionado. Útil cuando no tiene una identificación en elementos seleccionados.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

4

La respuesta simple es:

$('#first').select2().val()

y puedes escribir de esta manera también:

 $('#first').val()

3

Prueba esto :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

@RenishKhunt, las respuestas aquí no son solo para usted (la persona que hace la pregunta), sino también para otras personas que ven esta página. Y cuantas más soluciones diferentes se presenten aquí, la mejor opción para todos los demás, nuevamente: no solo usted :)
infografnet

Si, lo siento. Gracias, @infografnet y muchas gracias Fahmi Imanudin por publicar una respuesta :)
Renish Khunt

2

Mira este violín .
Básicamente, desea obtener la values de sus option-tags, pero siempre intenta obtener el valor de su select-node con $("#first").val().

Entonces tenemos que seleccionar las etiquetas de opción y utilizaremos los selectores jQuerys:

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")selecciona cada optionque es hijo del elemento con el id first.


$ ("# primero"). val (); // devuelve 1,2,3 OR $ ("# primero"). select2 ('val'); // vuelve primero, segundo, tres
Renish Khunt

Parece que entendí mal tu pregunta, entonces aclara exactamente lo que quieres lograr.
KeyNone

cuando utilicé el complemento select2, obtengo valor usando $ ("# primero"). val (). no devuelve nada, vuelve en blanco.
Renish Khunt

Mira este violín . Funciona perfectamente bien para mí. (Agregué select2.js debajo de los recursos externos, aunque no puedo decir por qué las cajas se ven feas).
KeyNone

¡la clave fue que dijiste que queremos obtener valor de las etiquetas de opciones!
Darius.V


0

Otras respuestas no me funcionaron, así que desarrollé una solución:

Creé una opción con class = "option-item" para facilitar la orientación

HTML:

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

Luego, para cada opción seleccionada, agregué mostrar ninguna propiedad

CSS:

option:checked {
   display: none;
}

Ahora podemos agregar un cambio a nuestro SelectBox para encontrar nuestra opción seleccionada con mostrar ninguna propiedad por simple : atributo oculto

JQuery:

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

Violín de trabajo: https://jsfiddle.net/Friiz/2dk4003j/10/


0

Solucion:

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();
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.