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

Question

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

Answer 1

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

Answer 2

Prueba esto:

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

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

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

Answer 3

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.

Answer 4

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: selected "). attr (" rel " ) la opción seleccionada no funciona en IE ayudó más.

Actualización: se corrigió el enlace anterior

Answer 5

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

Answer 6

Esto funciona para mí

$("#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());
});

Answer 7

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

Answer 8

Esto funciona para mí:

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

versión jQuery : 1.9.1

Answer 9

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();

Answer 10

Varias formas

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

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

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

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

Answer 11

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

Answer 12

var someName = "Test";

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

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

Answer 13

Por favor use esto

var listbox = document.getElementById("yourdropdownid");
var selIndex = listbox.selectedIndex;
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;   

Entonces, alerta " selValue " y " selText " ;. Obtiene el valor desplegable y el texto seleccionados

Answer 14

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

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

Answer 15

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

En lugar de #selectID puede usar cualquier selector jQuery, como .selectClass usar class.

Como se menciona en la documentación aquí .

El: selector seleccionado funciona para < opción > elementos. No funciona para casillas de verificación o entradas de radio; use :checked para 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.

Para que pueda tomar texto de cualquier elemento HTML utilizando el método .text().

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

Answer 16

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

Esto funciona bien

Answer 17

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

Answer 18

Para obtener el valor seleccionado, use

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

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

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

Answer 19

Seleccionar texto y valor seleccionado en el menú desplegable / seleccionar evento de cambio en jQuery

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

Answer 20

Uso:

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

Answer 21

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

Answer 22

lo siguiente funcionó para mí:

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

Answer 23

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

Answer 24

Esto funciona para mí:

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

Estoy usando jQuery 1.10.2

Answer 25

Prueba:

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

• http://api.jquery.com/val/
• http://api.jquery.com/text/

Answer 26

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

Answer 27

Simplemente intente el siguiente código.

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

devuelve el texto de la opción seleccionada.

Answer 28

Si desea el resultado como una lista, use:

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

Answer 29

Para selecciones múltiples:

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }

Answer 30

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

si usa asp.net y escribe

<Asp:dropdownlist id="ddl" runat="Server" />

entonces deberías usar

$('#<%=ddl.Clientid%> option:selected').text();