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

Essayez les options

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>

Answer 2

JavaScript pur et simple

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

jQuery :

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

Answer 3

Il existe deux solutions, pour autant que je sache.

pour les deux, il suffit d'utiliser du javascript classique

1 selectedOptions

Démonstration en direct

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 options

Démonstration en direct

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>

---

Answer 4

Toutes ces fonctions et ces choses aléatoires, je pense que c'est mieux d'utiliser ça, et de faire comme ça :

this.options[this.selectedIndex].text

Answer 5

HTML :

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

JavaScript :

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

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