Obter texto selecionado em uma lista suspensa (caixa de seleção) usando jQuery

2302

Como posso obter o texto selecionado (não o valor selecionado) em uma lista suspensa no jQuery?

haddar
fonte
12
Apenas meus dois centavos: Um menu suspenso "ASP" não é especial; é apenas um bom e velho HTML. :-)
ankush981
Pode-se consultar este artigo: javascriptstutorial.com/blog/…
Dilip Kumar Yadav 18/16
para a maneira javascript baunilha, ver stackoverflow.com/a/5947/32453
rogerdpack
Apenas $ (this) .prop ('selected', true); substituído .att para .prop funcionava para todos os navegadores
Shahid Hussain Abbasi

Respostas:

3773
$("#yourdropdownid option:selected").text();
rahul
fonte
207
Eu acho que isso deve ser $("#yourdropdownid").children("option").filter(":selected").text()porque is () retorna um valor booleano se o objeto corresponde ao seletor ou não.
MHollis 18/05
42
Eu segundo o comentário sobre é () retornando um boolen; Como alternativa, use a seguinte pequena alteração: $ ('# yourdropdownid'). children ("opção: selecionada"). text ();
scubbo
25
@ DT3 testado is("selected").text()retorna aTypeError: Object false has no method 'text'
ianace 19/10/12
96
$('select').children(':selected')é a maneira mais rápida: jsperf.com/get-selected-option-text
Simon
3
$ ("# IdSelect"). Children ("opção: selecionada"). Text ()
JD - DC TECH
266

Tente o seguinte:

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

Para um menu suspenso do ASP.NET, você pode usar o seguinte seletor:

$("[id*='MyDropDownId'] :selected")
kgiannakakis
fonte
A versão do ASP.NET aqui é o único Jquery que funciona com o asp.net para mim, portanto, eu concordo com esse. Este: ( '$ ("# yourdropdownid option: selected"). Text ();' não funcionou em uma página asp.net usando uma página mestre.
netfed
5
não funciona porque as páginas mestras do asp.net lançam caracteres aleatórios na frente do seletor. Tecnicamente, ele está procurando algo como("#ct0001yourdropdownid)
#
1
@ CSharper - Eu acho que dizer que o ASP.NET lança caracteres aleatórios é bastante enganador. Eles não são aleatórios, são estruturais e seguem regras estritas (com base em coisas como se você coloca um IDem seu controle e, se não for, com base no índice de onde elas ocorrem no nível atual da árvore etc.) )
freefaller
Oi, como você faz isso dentro de um / célula linha da tabela, como você sabe qual dos suspensa da mesa, especialmente no ASP MVC 5
transformador de
215

As respostas postadas aqui, por exemplo,

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

não funcionou para mim, mas isso funcionou:

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

É possivelmente uma versão mais antiga do jQuery.

JYX
fonte
7
Não odeie esta resposta. Usar a palavra-chave "find" fez o truque para mim. Eu estava vindo de um contexto completamente diferente.
ROFLwTIME
5
você não precisa da parte da opção, como está implícita na selecionada .. simplesmente usando $ ('# yourdropdownid: selected'). text (); vai funcionar bem
DSS
jquery-1.10.2.min, este funcionou para mim, não para outros.
Kubilay
As obras resposta popular, mas eu precisava de uma referência já obtido para o Select, então esta é a melhor resposta para mim
Graham
67

Isso funciona para mim

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

Se o elemento criado dinamicamente

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});
Prabhagaran
fonte
64
$("option:selected", $("#TipoRecorde")).text()
Rafael
fonte
55

$("#DropDownID").val() dará o valor de índice selecionado.

Neeraj
fonte
37
Não é exatamente a resposta para a pergunta, mas foi útil para mim. A pergunta quer o texto selecionado.
Peter
54

Isso funciona para mim:

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

Versão jQuery : 1.9.1

Binita Bharati
fonte
3
Isso funcionou para mim, porque no changeevento agora posso usar $(this).find('option:selected').text()para obter texto.
precisa saber é o seguinte
$(this).children(':selected').text()também funcionaria. @ Timo002
Mr. Mak
42

Para o texto do item selecionado, use:

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

Para o valor do item selecionado, use:

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

Várias maneiras

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

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

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

4. $("#myselect").find(":selected").text();
MaxEcho
fonte
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
124
fonte
isto é o que eu estava esperando com $(this) depois da minha chamada ajax
Shantaram Tupe
Você também pode fazer $ ("option: selected", this) .text () sem agrupar isso em um objeto JQuery.
Doug F
28

Usa isto

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

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

Então você obtém o valor e o texto selecionados dentro selectedValuee selectedText.

Mohammed Shaheen MK
fonte
1
Promovido porque esta é a única resposta que não usa jQuery.
23719 Justin Justard
Estou apaixonada por baunilha js. Muito obrigado por isso.
Enrique Bermúdez
27
var someName = "Test";

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

Isso irá ajudá-lo a obter a direção certa. O código acima é totalmente testado se você precisar de mais ajuda, me avise.

Zarni
fonte
19

Para aqueles que estão usando listas do SharePoint e não desejam usar o ID gerado por muito tempo, isso funcionará:

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

Em vez de #selectIDvocê pode usar qualquer seletor de jQuery, como .selectClassusar classe.

Conforme mencionado na documentação aqui .

O seletor: selecionado funciona para elementos <opção>. Não funciona para caixas de seleção ou entradas de rádio; use :checkedpara eles.

.text () Conforme a documentação aqui .

Obtenha o conteúdo do texto combinado de cada elemento no conjunto de elementos correspondentes, incluindo seus descendentes.

Assim, você pode pegar o texto de qualquer elemento HTML usando o .text()método

Consulte a documentação para uma explicação mais profunda.

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

Isso funciona bem

Thangamani Palanisamy
fonte
13

Para obter o valor selecionado, use

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

e para obter o texto do item selecionado, use esta linha:

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

Selecione Texto e valor selecionado no menu suspenso / selecione evento de alteração no jQuery

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

Simplesmente tente o seguinte código.

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

retorna o texto da opção selecionada.

Muddasir23
fonte
9

Usar:

('#yourdropdownid').find(':selected').text();
Kishore
fonte
9
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Kalaivani M
fonte
Tentei fazer o log do div var div = e.options[e.selectedIndex].text;e ele exibe apenas o primeiro item da opção. Como exibir cada item?
Chris22
@ Chris22 consulte este link stackoverflow.com/questions/3923858/…
Kalaivani M
8

o seguinte funcionou para mim:

$.trim($('#dropdownId option:selected').html())
Mohammad Dayyan
fonte
1
Nota: Não use isso para a seleção múltipla. Ele pega apenas o primeiro valor selecionado.
max
7

Este trabalho para mim:

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

Estou usando o jQuery 1.10.2

Rhaymand Tatlonghari
fonte
7

No caso de irmão

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

Clique para ver a tela OutPut

Bhanu Pratap
fonte
Oi, como você faz isso dentro de uma linha / célula da tabela , como você sabe qual do menu suspenso da tabela? Eu estou tentando fazer uma chamada de ajax para buscar e valores Preencher, eu posso fazer isso do lado de fora em uma página, mas não dentro da tabela Row ... você pode adicionar um pouco de ajuda por favor
transformador de
4

Se você deseja o resultado como uma lista, use:

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


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

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

$("#dropdown").children(":selected").text();
shyamm
fonte
não explicar por que iria trabalhar
jwenting
2

Este código funcionou para mim.

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