Tengo un marcado HTML simple como se muestra a continuación: -

<select id="select1">
<option></option>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
<option>DDD</option>
<option>EEE</option>
</select>  

<textarea style="height:150px;width:150px" id="t1"></textarea>
<textarea style="height:150px;width:150px" id="t2"></textarea>

Código Jquery: -

$("#select1").change(function(){
  $("#t1").val($(this).text());            // 1st
});

$("#select1").change(function(){
  $("#t2").val($(this).val());             // 2nd
});

Mis preguntas :-

1.) Cuando uso el primer código de jquery usando .text(), se muestra el texto de todas las opciones en la etiqueta de selección. En cambio, esperaba que solo el texto de la opción seleccionada se mostrara en el primer código de jquery.

2.) Cuando uso el segundo código jquery usando .val(), en este caso .val() funciona, aunque no espero que funcione porque no hay valores en mi menú desplegable, pero funciona y dando el texto de la opción seleccionada como valor.

Arriba están escritas mis dos preguntas. Solo quiero una explicación de por qué el código jquery anterior y segundo se está comportando inesperadamente.

Enlace de violín: - http://jsfiddle.net/mzfmxsd8/

Gracias en Advance..!!

-2
anon 28 ago. 2014 a las 08:42

6 respuestas

La mejor respuesta

1) Necesita encontrar el option que está seleccionado, luego buscar su texto como $("#t1").val($(this).find(':selected').text());. El método .text () devolverá el contenido de texto de todos los descendientes del elemento actual. Por lo tanto, obtiene el texto de todas las opciones en la selección.

2) Si no hay valor, el contenido del texto se considera como el valor

option.value

El contenido textual de este atributo representa la etiqueta que explica la opción. Si no está definido, su valor predeterminado es el contenido de texto del elemento.

Demostración: Fiddle

3
Arun P Johny 28 ago. 2014 a las 05:13

this se refiere al elemento seleccionado. Cuando llamas a .text(), recupera todos sus descendientes (los elementos de opción) y extrae el texto, que es lo que estás viendo.

Cuando los valores de las opciones no tienen un atributo de valor, el texto dentro de él se convierte en su valor. Y así, el valor del elemento seleccionado es el valor de la opción seleccionada.

2
sahbeewah 28 ago. 2014 a las 04:47

Por favor, consulte con el siguiente código

$("#select1").change(function(){
  $("#t1").val($("#select1 option:selected").text());           
});
0
sameer 28 ago. 2014 a las 05:07

Solo necesita obtener el texto de la opción seleccionada

$("#select1").change(function(){
    $("#t1").val($(this).find('option:selected').text());
});

$("#select1").change(function(){
   $("#t2").val($(this).val());
});

Demo

0
Amit Kumar 28 ago. 2014 a las 04:56

En su código, está tratando de mostrar el texto de las opciones seleccionando todas las opciones del elemento seleccionado. Como desea mostrar el texto de la única opción seleccionada, debe seleccionar solo la opción seleccionada y mostrar su texto dentro del área de texto.

Aquí está el código:

$("#select1").change(function(){
  $("#t1").val($(this).find("option:selected").text());            // 1st
});
1
Viswanath D 28 ago. 2014 a las 05:08

Para obtener el valor seleccionado:

this[this.selectedIndex].value

Úselo en la lambda. Al leer la fuente jQuery encontrarás tu respuesta por ti. En particular, debe consultar el método val si desea conocer las partes internas.

Ejemplo: http://jsfiddle.net/LnL3trzj/

0
Ryan 28 ago. 2014 a las 04:54