Obtenir le texte de l'option sélectionnée avec JavaScript

Question

J'ai une liste déroulante comme celle-ci :

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

Comment puis-je obtenir le texte réel de l'option plutôt que sa valeur en utilisant JavaScript ? Je peux obtenir la valeur avec quelque chose comme :

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

Mais plutôt que de 7122 Je veux cat .

Answer 1

Utilisation -

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

Voici le violon - http://jsfiddle.net/eEGr3/

Answer 2

Utilisation de vanilla JavaScript

onChange = { e => e.currentTarget.options[e.selectedIndex].text }

vous donnera la valeur exacte si les valeurs sont dans une boucle.

Answer 3

Pour l'obtenir sur React avec Typescript :

  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
    const {  options, selectedIndex } = event.target;
    const text = options[selectedIndex].text;
    // Do something...
  };

Answer 4

Utilisation de Jquery.
Dans votre événement

  let selText = $("#box1 option:selected").text();
  console.log(selText);

Answer 5

function runCode() {
  var value = document.querySelector('#Country').value;
  window.alert(document.querySelector(`#Country option[value=${value}]`).innerText);
}

<select name="Country" id="Country">
   <option value="IN">India</option>
   <option value="GBR">United Kingdom </option>
   <option value="USA">United States </option>
   <option value="URY">Uruguay </option>
   <option value="UZB">Uzbekistan </option>
</select>

<button onclick="runCode()">Run</button>