Obtenha o texto da opção selecionada com JavaScript

124

Eu tenho uma lista suspensa como esta:

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

Como posso obter o texto da opção real em vez do valor usando JavaScript? Posso obter o valor com algo como:

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

Mas ao invés de 7122eu quero cat.

techtheatre
fonte
2
stackoverflow.com/a/1085810/1339473 veja isto para mais ajuda
QuokMoon
possível duplicata de Como obter o valor selecionado da lista suspensa usando JavaScript? - apesar do título, responde à sua pergunta.
Felix Kling de

Respostas:

226

Experimente opções

function myNewFunction(sel) {
  alert(sel.options[sel.selectedIndex].text);
}
<select id="box1" onChange="myNewFunction(this);">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

999k
fonte
28
Primeira regra ao tentar usar regex - continue pesquisando no Stack Overflow até encontrar a solução que não precisa de regex
saúde
2
É mais limpo escrever onchange sem maiúscula
Simon Baars
92

JavaScript simples

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();
sasi
fonte
1
@mplungjan Por que você não comenta aqui que jQuery usa .textContente .innerTextpara .text()operação de método? Não é por padrões, é totalmente errado porque não usa .text. Onde estão os votos negativos?
VisioN de
Onde está o innerHTML?
mplungjan de
@mplungjan Não é innerHTML, innerTexté ainda pior.
VisioN de
Eu vejo a opção: {get: function (elem) {var val = elem.attributes.value; voltar! val || val.specified? elem.value: elem.text;} em 1.9
mplungjan de
15

Todas essas funções e coisas aleatórias, acho que é melhor usar isso, e fazer assim:

this.options[this.selectedIndex].text
Klidifia
fonte
6

HTML:

<select id="box1" onChange="myNewFunction(this);">

JavaScript:

function myNewFunction(element) {
    var text = element.options[element.selectedIndex].text;
    // ...
}

DEMO: http://jsfiddle.net/6dkun/1/

Visão
fonte
ver este comentário Removi nossa conversa desde que você corrigiu seu código
mplungjan
3

Usar -

$.trim($("select").children("option:selected").text())   //cat

Aqui está o violino - http://jsfiddle.net/eEGr3/

Ashwin
fonte
2
Onde a pergunta menciona jQuery?
mplungjan de
1

Você precisará obter o innerHTML da opção, não seu valor.

Use em this.innerHTMLvez de this.selectedIndex.

Editar: você precisará obter o elemento de opção primeiro e, em seguida, usar o innerHTML.

Use em this.textvez de this.selectedIndex.

Nick Pickering
fonte
Isto está errado. Ele vai grap o innerHTMLdo <select>elemento.
VisioN de
1
 <select class="cS" onChange="fSel2(this.value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select><br>

 <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <script type="text/javascript"> "use strict";
   const s=document.querySelector(".cS");

 // options[this.selectedIndex].value
 let fSel = (sIdx) => console.log(sIdx,
     s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);

 let fSel2= (sIdx) => { // this.value
     console.log(sIdx, s.options[sIdx].text,
         s.options[sIdx].textContent, s.options[sIdx].label);
 }

 // options[this.selectedIndex].text
 // options[this.selectedIndex].textContent
 // options[this.selectedIndex].label
 // options[this.selectedIndex].innerHTML
 let fSel3= (sIdx) => {
     console.log(sIdx);
 }
 </script> // fSel

Mas :

 <script type="text/javascript"> "use strict";
    const x=document.querySelector(".cS"),
          o=x.options, i=x.selectedIndex;
    console.log(o[i].value,
                o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
 </script> // .cS"

E também este:

 <select id="iSel" size="3">
     <option value="one">Un</option>
     <option value="two">Deux</option>
     <option value="three">Trois</option>
 </select>


 <script type="text/javascript"> "use strict";
    const i=document.getElementById("iSel");
    for(let k=0;k<i.length;k++) {
        if(k == i.selectedIndex) console.log("Selected ".repeat(3));
        console.log(`${Object.entries(i.options)[k][1].value}`+
                    ` => ` +
                    `${Object.entries(i.options)[k][1].innerHTML}`);
        console.log(Object.values(i.options)[k].value ,
                    " => ",
                    Object.values(i.options)[k].innerHTML);
        console.log("=".repeat(25));
    }
 </script>
Jean-Dadet Diasoluka
fonte
1

Existem duas soluções, pelo que eu sei.

ambos precisam apenas de javascript vanilla

1 opções selecionadas

demonstração ao vivo

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.selectedOptions[0].text;
  log(`option desc`, desc);
});
<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

2 opções

demonstração ao vivo

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.options[select.selectedIndex].text;
  log(`option desc`, desc);
});
<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>


xgqfrms
fonte
-1

Experimente o seguinte:

myNewFunction = function(id, index) {
    var selection = document.getElementById(id);
    alert(selection.options[index].innerHTML);
};

Veja aqui amostra de jsfiddle

Ericosg
fonte
1
Por que todo mundo está insistindo em innerHTML ??? Use .text! E por que passar tudo isso para a função. Basta passar (this) e fazer com que a função decida o que usar
mplungjan de
Eh, acho que pode ser melhor / mais rápido, mas gostaria de ouvir a réplica de @mplungjan.
Nick Pickering de
1
innerHTML é um método prático inventado pela Microsoft. Ele foi então copiado para mais navegadores, mas como a) não é padrão eb) você não pode ter html em uma opção, não há absolutamente nenhuma necessidade de confundir o problema quando uma opção tem .value e .text
mplungjan
innerHTMLé tão conveniente ... Estou disposto a sacrificar todos os padrões e simplicidade por isso. : P
Nick Pickering
1
Pessoalmente, eu uso .text () com jQuery e .innerHTML com JS puro e me ajuda a evitar erros ao mixar frameworks, apenas por hábito. Eu sei que o innerHTML funciona em todos os navegadores e isso me deixa feliz :) ah e eu especifiquei os dois parâmetros de função para que o OP possa se relacionar mais facilmente com a minha solução, nenhum outro motivo.
Ericosg de