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..!!
6 respuestas
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
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
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.
Por favor, consulte con el siguiente código
$("#select1").change(function(){
$("#t1").val($("#select1 option:selected").text());
});
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());
});
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
});
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/
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.
En Español