Recuperando o texto da <opção> selecionada no elemento <selecionar>

156

Na sequência:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

Como posso obter o texto da opção selecionada (por exemplo, "Teste Um" ou "Teste Dois") usando JavaScript

document.getElementsById('test').selectedValue retorna 1 ou 2, que propriedade retorna o texto da opção selecionada?

CountZero
fonte

Respostas:

258
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');
Sean Bright
fonte
javascript brilhante como sempre!
doniyor
3
Esta resposta está desatualizada, consulte a resposta de @ davidjb abaixo para obter uma boa linha de código HTML5.
precisa
1
@Christallkeks - o one-liner lança uma exceção se nada for selecionado . menos linhas nem sempre são melhores.
Sean brilhante
88

Se você usa jQuery, pode escrever o seguinte código:

$("#selectId option:selected").html();
arturgrigor
fonte
30
desde que ele quer que o texto, provavelmente melhor usar.text()
Muhd
5
Não deve ser confundido com $("#selectId option[selected]"), que selecionará a opção que possui o atributo "selecionado", mas que pode não estar atualmente selecionado.
precisa saber é o seguinte
parece mais complicado.!
NDEthos 18/12/2015
54
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
verme
fonte
Funcionou para mim também, depois de tentar todas as outras opções.
mimi
este wordk perfeito!
Albert Hidalgo
29

No HTML5, você pode fazer isso:

document.getElementById('test').selectedOptions[0].text

A documentação da MDN em https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indica suporte completo a vários navegadores (a partir de dezembro de 2017), incluindo Chrome, Firefox, Edge e navegadores móveis , mas excluindo o Internet Explorer.

davidjb
fonte
+1, enquanto isso é o caminho a seguir. O tíquete do Firefox foi corrigido e eu até me incomodei em abrir o MS Edge para verificar se eles também são compatíveis.
precisa
7

A optionspropriedade contém todos os <options>- a partir daí você pode ver.text

document.getElementById('test').options[0].text == 'Text One'
Greg
fonte
6

Você pode usar selectedIndexpara recuperar o atual selecionado option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
jamshid
fonte
4

this.options [this.selectedIndex] .innerText

Phani CR
fonte
2

Se você encontrou este tópico e queria saber como obter o texto da opção selecionada via evento, aqui está o código de exemplo:

alert(event.target.options[event.target.selectedIndex].text);
zeros-e-uns
fonte
1

Use o objeto de lista de seleção para identificar seu próprio índice de opções selecionadas. A partir daí - pegue o HTML interno desse índice. E agora você tem a sequência de texto dessa opção.

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>
Creeperstanson
fonte
Adicione alguma explicação
HaveNoDisplayName 2/16/16
.innerHTMLobtém todas as crianças e seus atributos. Embora funcione quando um elemento não tem filhos, se você tiver um elemento com filhos, ele retornará muito mais do que o pretendido.
Hipkiss # 30/16
1
Quantos "filhos" você espera ter entre suas tags <option> Filhos? </option>?
Creeperstanson
0

Semelhante ao @artur apenas sem jQuery, com javascript comum:

// Usando a variável "elt" de @ Sean-bright

var selection=elt.options[elt.selectedIndex].innerHTML;
viditkothari
fonte
0

Maneira fácil e simples:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
Paweł Bednarczyk
fonte
1
Embora esse trecho de código possa resolver o problema, ele não explica por que ou como responde à pergunta. Por favor incluir uma explicação para o seu código , como o que realmente ajuda a melhorar a qualidade do seu post. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.
Luca Kiebel 10/09
Não vejo como isso é fácil ou simples. Por que você usaria find()quando já conhece o índice do item selecionado? Além disso, se não houver um item selecionado ( <select multiple>), isso gerará um erro.
Sean Bright