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?

Mate
fuente

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.

Nick Craver
fuente
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());
});
Puntiagudo
fuente
8

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

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
ThdK
fuente
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 )

koppor
fuente
2

Prueba el siguiente código

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});
ketan
fuente
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() + " ";
      });
Sandeep Kumar
fuente
1

Esto funcionó para mí:

$("#SelectedCountryId_option_selected")[0].textContent
Mpho Makhubele
fuente
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!

HappyCoder
fuente
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> ...]
alejandro
fuente
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());
Amit Dash
fuente
0

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

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

tibi
fuente
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);
Tariq
fuente