web-dev-qa-db-fra.com

Récupérer le texte de l'élément <option> sélectionné dans l'élément <select>

Dans ce qui suit: 

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

Comment obtenir le texte de l'option sélectionnée ("Test One" ou "Test Two") à l'aide de JavaScript

document.getElementsById('test').selectedValue renvoie 1 ou 2, quelle propriété renvoie le texte de l'option sélectionnée?

javascripthtmldom
145
CountZero
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

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

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

var text = getSelectedText('test');
243
Sean Bright

Si vous utilisez jQuery, vous pouvez écrire le code suivant:

$("#selectId option:selected").html();
84
arturgrigor
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
52
wormhit
selectElement.options[selectElement.selectedIndex].text;

Références:

26
user669677

Sous HTML5, vous pouvez faire ceci:

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

La documentation de MDN à https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indique un support complet entre navigateurs (à partir de décembre 2017), y compris Chrome, Firefox, Navigateurs Edge et mobiles, mais à l’exclusion d’Internet Explorer.

20
davidjb

La propriété options contient tout le <options> - à partir de là, vous pouvez regarder .text

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

Vous pouvez utiliser selectedIndex pour récupérer la option actuelle sélectionnée:

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

this.options [this.selectedIndex] .innerText

3
Phani CR

Si vous avez trouvé ce fil et que vous voulez savoir comment obtenir le texte de l'option sélectionnée via event, voici un exemple de code:

alert(event.target.options[event.target.selectedIndex].text);
2
zeros-and-ones

Utilisez l'objet de liste de sélection pour identifier son propre index d'options sélectionné . À partir de là, récupérez le code HTML interne de cet index . Et vous disposez maintenant de la chaîne de texte de cette option.

<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>
1
Creeperstanson

Semblable à @artur juste sans jQuery, avec javascript simple:

// Utilisation de la variable "elt" de @ Sean-bright

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

Manière simple et facile:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
0
Paweł Bednarczyk