Obtener la opción seleccionada del elemento seleccionado


93

Estoy tratando de obtener la opción seleccionada de un menú desplegable y completar otro elemento con ese texto, de la siguiente manera. IE está ladrando como una tormenta y no funciona en Firefox:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

¿Qué estoy haciendo mal?

Respuestas:


187

Aquí hay una versión corta:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 hizo una buena captura, a juzgar por el nombre de su elemento txtEntry2puede ser un cuadro de texto, si es algún tipo de entrada, deberá usar .val()en su lugar o .text()así:

  $('#txtEntry2').val($(this).find(":selected").text());

Para el "¿qué pasa?" parte de la pregunta: .text()no toma un selector, toma el texto que desea que esté configurado, o nada para devolver el texto que ya está allí. Por lo tanto, debe buscar el texto que desea, luego ponerlo en el .text(string)método del objeto que desea configurar, como lo hice anteriormente.


7
Si txtEntry2es una entrada de texto, OP deberá usar val()en su lugar.
karim79

@ karim79 - Buen punto, por el nombre del elemento que probablemente sea, actualizando.
Nick Craver

sí, al cambiar .text a .val y obtener el texto de manera diferente, todo salió bien. Gracias amigos
Matt

¡Me acabas de salvar de volverme oficialmente loco!
nathanchere

15

Prueba esto:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

Aquí hay una versión más corta que también debería funcionar:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

Error de tipo no detectado: el objeto # <HTMLSelectElement> no tiene el método 'val'
DoodleKana

1
this.valuelo arreglaría.
Kris Selbekk

4

Con menos jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value es JavaScript simple.

(Fuente: SelfHTML alemán )


2

Prueba el siguiente código

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

Para saber el número de elementos seleccionados utilice

$("select option:selected").length

Para obtener el valor de todos los elementos seleccionados, use

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });


1

La primera parte es obtener el elemento del menú desplegable que puede verse así:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

Para capturar a través de jQuery, puede hacer algo como esto:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

Una vez que haya almacenado el valor en su variable, el siguiente paso sería enviar la información almacenada en la variable al campo de formulario o elemento HTML de su elección. Puede ser un elemento div p o personalizado.

es decir <p></p> OR <div></div>

Usarías:

$ ('p'). html (iteraciones); O $ ('div'). Html (iteraciones);

Si desea completar un campo de texto como:

<input type="text" name="textform" id="textform"></input>

Usarías:

$ ('# formulario de texto'). texto = iteraciones;

Por supuesto, puede hacer todo lo anterior en menos pasos, solo creo que ayuda a las personas a aprender cuando lo divide todo en pasos fáciles de entender ... ¡Espero que esto ayude!


1

Usando la propiedad selectedOptions (HTML5) puede obtener las opciones seleccionadas

document.getElementbyId("id").selectedOptions; 

Con JQuery se puede lograr haciendo esto

$("#id")[0].selectedOptions; 

o

$("#id").prop("selectedOptions");

La propiedad contiene una matriz HTMLCollection similar a esta opción seleccionada

[<option value=​"1">​ABC</option>]

o selecciones múltiples

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

0

Lo anterior funcionaría muy bien, pero parece que se ha perdido el encasillado de jQuery para el texto desplegable. Aparte de eso, sería aconsejable utilizar .val()para establecer texto para un elemento de tipo de texto de entrada. Con estos cambios, el código se vería así:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

si ya tiene esto y usa jquery, esta será su respuesta:

$ ($ (esto) [0] .selectedOptions [0]). text ()


0

Dado este HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

Seleccionar por descripción para jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
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.