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

2302

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

Haddar
fuente
12
Solo mis dos centavos: un menú desplegable "ASP" no es especial; es solo un buen HTML antiguo. :-)
ankush981
Uno puede referir este artículo: javascriptstutorial.com/blog/…
Dilip Kumar Yadav
para la forma de Javascript de vainilla, consulte stackoverflow.com/a/5947/32453
rogerdpack
Solo $ (this) .prop ('selected', true); reemplazado .att a .prop funcionó para todos los navegadores
Shahid Hussain Abbasi

Respuestas:

3773
$("#yourdropdownid option:selected").text();
rahul
fuente
207
Creo que esto debería ser $("#yourdropdownid").children("option").filter(":selected").text()dado que is () devuelve un valor booleano de si el objeto coincide con el selector o no.
MHollis
42
Segundo, el comentario sobre es () devolver un boolen; alternativamente, use la siguiente pequeña alteración: $ ('# yourdropdownid'). children ("opción: seleccionado"). text ();
scubbo
25
@ DT3 probado is("selected").text()devuelve unTypeError: Object false has no method 'text'
ianace
96
$('select').children(':selected')es la forma más rápida: jsperf.com/get-selected-option-text
Simon
3
$ ("# IdSelect"). Children ("opción: seleccionado"). Text ()
JD - DC TECH
266

Prueba esto:

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

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

$("[id*='MyDropDownId'] :selected")
kgiannakakis
fuente
La versión ASP.NET aquí es la única Jquery que funciona con asp.net para mí, por lo tanto, estoy de acuerdo con eso. Éste: ( '$ ("# opción de yourdropdownid: seleccionado"). Text ();' no funcionó en una página asp.net usando una página maestra.
netfed
55
no funciona porque las páginas maestras de asp.net arrojan caracteres aleatorios frente al selector. Técnicamente está buscando algo así("#ct0001yourdropdownid)
CSharper
1
@CSharper: creo que decir que ASP.NET arroja caracteres aleatorios es bastante engañoso. No son aleatorias en absoluto, son estructurales y siguen reglas estrictas (basadas en cosas como si pones un IDcontrol, y si no, entonces se basan 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 se sabe cuál de los menús desplegables de la tabla, especialmente en ASP MVC 5
transformador
215

Las respuestas publicadas aquí, por ejemplo,

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

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

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

Es posiblemente una versión anterior de jQuery.

JYX
fuente
77
No odies esta respuesta. El uso de la palabra clave "buscar" me sirvió. Venía de un contexto completamente diferente.
ROFLwTIME
55
no necesita la parte de la opción, ya que está implícita con seleccionado ... 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 para seleccionar, por lo que esta es la mejor respuesta para mí
Graham el
67

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());
});
Prabhagaran
fuente
64
$("option:selected", $("#TipoRecorde")).text()
Rafael
fuente
55

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

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

Esto funciona para mi:

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

Versión de jQuery : 1.9.1

Binita Bharati
fuente
3
Esto funcionó para mí, porque en el changeevento ahora puedo usar $(this).find('option:selected').text()para obtener texto.
Timo002
$(this).children(':selected').text()También funcionaría. @ Timo002
Sr. Mak
42

Para el texto del elemento seleccionado, use:

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

Para el valor del elemento seleccionado, use:

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

Varias maneras

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

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

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

4. $("#myselect").find(":selected").text();
MaxEcho
fuente
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
124
fuente
esto es lo que esperaba $(this) después de mi llamada ajax
Shantaram Tupe
También puede hacer $ ("opción: seleccionada", esto) .text () sin envolver esto en un objeto JQuery.
Doug F
28

Utilizar este

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 selectedValuey selectedText.

Mohammed Shaheen MK
fuente
1
Upvoted porque esta es la única respuesta que no usa jQuery.
Justin Lessard
Estoy enamorado de vanilla js. Muchas gracias por esto.
Enrique Bermúdez
27
var someName = "Test";

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

Eso te ayudará a obtener la dirección correcta. El código anterior se prueba completamente si necesita más ayuda, hágamelo saber.

Zarni
fuente
19

Para aquellos que usan listas de SharePoint y no quieren usar la identificación generada durante mucho tiempo, esto funcionará:

var e = $('select[title="IntenalFieldName"] option:selected').text();
FAA
fuente
17
 $("#selectID option:selected").text();

En lugar de #selectIDusar cualquier selector jQuery, como .selectClassusar class.

Como se menciona en la documentación aquí .

El selector seleccionado funciona para elementos <option>. No funciona para casillas de verificación o entradas de radio; utilizar :checkedpara ellos.

.text () 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 tanto, puede tomar texto de cualquier elemento HTML utilizando el .text()método

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

Nikhil Agrawal
fuente
15
$("select[id=yourDropdownid] option:selected").text()

Esto funciona bien

Thangamani Palanisamy
fuente
13

Para obtener el valor seleccionado use

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

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

$("#dropDownId option:selected").text();
Mojtaba
fuente
12
$('#id').find('option:selected').text();
Nikul
fuente
11

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

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

Simplemente intente el siguiente código.

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

devuelve el texto de la opción seleccionada.

Muddasir23
fuente
9

Utilizar:

('#yourdropdownid').find(':selected').text();
kishore
fuente
9
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Kalaivani M
fuente
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 cada elemento se muestre?
Chris22
@ Chris22 consulte este enlace stackoverflow.com/questions/3923858/…
Kalaivani M
8

lo siguiente funcionó para mí:

$.trim($('#dropdownId option:selected').html())
Mohammad Dayyan
fuente
1
Nota: No use esto para selección múltiple. Solo toma el primer valor seleccionado.
max
7

Este trabajo para mi:

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

Estoy usando jQuery 1.10.2

Rhaymand Tatlonghari
fuente
7

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()
viña
fuente
7

$(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

Bhanu Pratap
fuente
Hola, ¿cómo 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 ... ¿puede agregar alguna ayuda por favor
Transformador
4

Si desea el resultado como una lista, use:

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


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

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

$("#dropdown").children(":selected").text();
shyamm
fuente
explique por qué eso funcionaría
comenzando el
2

Este código me funcionó.

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