Obtenga el texto seleccionado de una lista desplegable (cuadro de selección) usando jQuery

¿Cómo puedo obtener el texto seleccionado (no el valor seleccionado) de un la lista desplegable en jQuery?

preguntado Oct 29 '09, 09:10

Solo mis dos centavos: un menú desplegable "ASP" no es especial; es solo un buen HTML antiguo. :-) -

Se puede consultar este artículo: javascriptstutorial.com/blog/… -

para la forma de vainilla javascript, ver stackoverflow.com/a/5947/32453 -

Solo $ (esto) .prop ('seleccionado', verdadero); reemplazó .att a .prop, funcionó para todos los navegadores -

30 Respuestas

$("#yourdropdownid option:selected").text();

Respondido 29 Oct 09, 12:10

Creo que esto debería ser $("#yourdropdownid").children("option").filter(":selected").text() ya que is () devuelve un valor booleano de si el objeto coincide con el selector o no. - mhollis

Secundo el comentario sobre is () devolviendo un boolen; alternativamente, use la siguiente pequeña alteración: $ ('# yourdropdownid'). children ("option: selected"). text (); - scubbo

@ DT3 probado is("selected").text() devuelve un TypeError: Object false has no method 'text' - ianace

$('select').children(':selected') es la forma más rápida: jsperf.com/get-selected-option-text - Simon

$ ("# IdSelect"). Children ("opción: seleccionada"). Text () - JD - TECNOLOGÍA DC

Prueba esto:

$("#myselect :selected").text();

Para un menú desplegable ASP.NET, puede usar el siguiente selector:

$("[id*='MyDropDownId'] :selected")

Respondido 29 Oct 09, 12:10

La versión ASP.NET aquí es la única Jquery que funciona con asp.net para mí, por lo tanto, acepto esa. Éste: ('$ ("# yourdropdownid option: selected"). text ();' no funcionó en una página asp.net usando una página maestra. - netfed

no funciona porque las páginas maestras de asp.net arrojan caracteres aleatorios frente al selector. Técnicamente está buscando algo como ("#ct0001yourdropdownid) - C

javascriptstutorial.com/blog/… - Dilip Kumar Yadav

@CSharper - Creo que digo ASP.NET arroja personajes aleatorios es bastante engañoso. No son aleatorios en absoluto, son estructurales y siguen reglas estrictas (basadas en cosas como si pones un ID bajo su control, y si no, entonces basado en el índice de dónde ocurren en el nivel actual del árbol, etc.) - Freefaller

Hola, ¿cómo se hace esto dentro de una fila / celda de la tabla? ¿Cómo saber cuál de los menús desplegables de la tabla, especialmente en ASP MVC 5? transformador

Las respuestas publicadas aquí, por ejemplo,

$('#yourdropdownid option:selected').text();

no funcionó para mí, pero esto sí:

$('#yourdropdownid').find('option:selected').text();

Posiblemente sea una versión anterior de jQuery.

Respondido 28 Feb 15, 08:02

No odies esta respuesta. El uso de la palabra clave "buscar" funcionó para mí. Venía de un contexto completamente diferente. - ROFLwTIME

no necesita la parte de opción en absoluto, ya que está implícita con selected .. simplemente usando $ ('# yourdropdownid: selected'). text (); funcionará bien - Dss

jquery-1.10.2.min, este funcionó para mí, no para otros. - kubilay

La respuesta popular funciona, pero la necesitaba en una referencia ya obtenida de la selección, así que esta es la mejor respuesta para mí: Graham

Si ya tiene la lista desplegable disponible en una variable, esto es lo que funciona para mí:

$("option:selected", myVar).text()

Las otras respuestas a esta pregunta me ayudaron, pero finalmente el hilo del foro jQuery $ (esta + "opción: seleccionada"). La opción attr ("rel") seleccionada no funciona en IE ayudó más.

Actualización: se corrigió el enlace anterior

contestado el 12 de mayo de 16 a las 08:05

Esto funciona para mi

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

Si el elemento creado dinámicamente

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});

Respondido 01 ago 17, 08:08

$("option:selected", $("#TipoRecorde")).text()

Respondido el 17 de enero de 12 a las 18:01

esto ayudó, porque tuve que usar $ (this) .. fue fácil con este. - El Padrino

$("#DropDownID").val() dará el valor de índice seleccionado.

respondido 14 nov., 11:09

No es exactamente la respuesta a la pregunta, pero fue útil para mí. La pregunta quiere el texto seleccionado. - Peter

Esto funciona para mi:

$('#yourdropdownid').find('option:selected').text();

jQuery Versión: 1.9.1

Respondido 28 Feb 15, 08:02

Esto funcionó para mí, porque en el change evento que ahora puedo usar $(this).find('option:selected').text() para recibir texto. - Timo002

$(this).children(':selected').text() también funcionaría. @ Timo002 - Sr. Mak

Para el texto del elemento seleccionado, use:

$('select[name="thegivenname"] option:selected').text();

Para el valor del artículo seleccionado, use:

$('select[name="thegivenname"] option:selected').val();

Respondido el 29 de junio de 16 a las 13:06

Varias maneras

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();

Respondido 03 ago 14, 20:08

$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

Respondido 01 Feb 14, 05:02

esto es lo que esperaba con $(this) después de mi llamada ajax - Shantaram tupé

También puede hacer $ ("option: selected", this) .text () sin envolver esto en un objeto JQuery. - Doug F.

Use

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;

Luego obtienes el valor seleccionado y el texto dentro selectedValue y selectedText.

respondido 22 nov., 19:14

Votó a favor porque esta es la única respuesta que no usa jQuery. - Justin

Estoy enamorado de Vanilla JS. Muchas gracias por esto. - Enrique Bermúdez 

var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

Eso le ayudará a tomar la dirección correcta. El código anterior está completamente probado si necesita más ayuda, hágamelo saber.

Respondido 02 Feb 11, 12:02

Para aquellos que están usando SharePoint listas y no quiero usar la identificación generada por mucho tiempo, esto funcionará: 

var e = $('select[title="IntenalFieldName"] option:selected').text();

respondido 21 mar '15, 13:03

 $("#selectID option:selected").text();

En lugar de #selectID puedes usar cualquier selector de jQuery, como .selectClass usando clase.

Como se menciona en la documentación aquí.

El selector seleccionado funciona para elementos. No funciona para casillas de verificación o entradas de radio; usar :checked para ellos.

.texto() Según la documentación aquí.

Obtenga el contenido de texto combinado de cada elemento en el conjunto de elementos coincidentes, incluidos sus descendientes.

Por lo que puede tomar texto de cualquier elemento HTML utilizando el .text() método.

Consulte la documentación para obtener una explicación más detallada.

Respondido 28 Feb 15, 08:02

$("select[id=yourDropdownid] option:selected").text()

Esto funciona bien

Respondido 23 Abr '13, 11:04

Para obtener un uso de valor seleccionado 

$('#dropDownId').val();

y para obtener el texto del elemento seleccionado, use esta línea:

$("#dropDownId option:selected").text();

Respondido el 23 de enero de 16 a las 09:01

$('#id').find('option:selected').text();

Respondido 11 Abr '15, 10:04

Seleccione el texto y el valor seleccionado en el menú desplegable / seleccione el evento de cambio en jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})

Respondido el 29 de junio de 16 a las 13:06

Tratar:

$var = jQuery("#dropdownid option:selected").val();
   alert ($var);

O para obtener el texto de la opción, use text():

$var = jQuery("#dropdownid option:selected").text();
   alert ($var);

Más información:

respondido 09 mar '17, 07:03

Simplemente pruebe el siguiente código.

var text= $('#yourslectbox').find(":selected").text();

devuelve el texto de la opción seleccionada.

respondido 13 nov., 18:06

Uso:

('#yourdropdownid').find(':selected').text();

respondido 29 nov., 14:09

var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;

Respondido el 04 de enero de 17 a las 12:01

Intenté iniciar sesión en el div var div = e.options[e.selectedIndex].text;y solo muestra el primer elemento de opción. ¿Cómo hacer que se muestre cada artículo? - Chris22

@ Chris22 refiera este enlace stackoverflow.com/questions/3923858/… - Kalaivani M

lo siguiente funcionó para mí:

$.trim($('#dropdownId option:selected').html())

Respondido el 17 de Septiembre de 15 a las 06:09

Nota: No use esto para selección múltiple. Solo toma el primer valor seleccionado. - max

Este trabajo para mi:

$("#city :selected").text();

Estoy usando jQuery 1.10.2

Respondido 09 Jul 15, 03:07

En caso de hermanos 

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()

Respondido el 29 de junio de 16 a las 13:06

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

Haga clic para ver la pantalla de salida

Respondido el 29 de Septiembre de 16 a las 05:09

Hola como haces esto dentro de una fila / celda de la tabla, ¿Cómo sabes cuál de los menús desplegables de la tabla? Estoy tratando de hacer una llamada ajax para buscar y completar valores, puedo hacer esto afuera en una página, pero no dentro de la fila de la tabla ... ¿pueden agregar algo de ayuda, por favor? transformador

Si desea el resultado como una lista, utilice:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})

Respondido el 18 de enero de 17 a las 21:01

Este código funcionó para mí.

$("#yourdropdownid").children("option").filter(":selected").text();

Respondido 13 Feb 20, 16:02

$("#dropdown").find(":selected").text();


$("#dropdown :selected").text();

$("#dropdown option:selected").text();

$("#dropdown").children(":selected").text();

Respondido el 17 de diciembre de 19 a las 06:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.