Comment accéder au texte "affiché" d'une option de boîte de sélection du DOM?

Question

avec le code HTML suivant:

<select name="my_dropdown" id="my_dropdown"> 
<option value="1">displayed text 1</option> 
</select> 

Comment puis-je attraper la chaîne "texte affiché 1" en utilisant Javascript/DOM?

Answer 1

var sel = document.getElementById("my_dropdown"); 

//get the selected option 
var selectedText = sel.options[sel.selectedIndex].text; 

//or get the first option 
var optionText = sel.options[0].text; 

//or get the option with value="1" 
for(var i=0; i<sel.options.length; i++){ 
    if(sel.options[i].value == "1"){ 
     var valueIsOneText = sel.options[i].text; 
    } 
} 

Answer 2

Le texte affiché est un nœud enfant du nœud d'option. Vous pouvez utiliser:

myOptionNode.childNodes[0]; 

d'y accéder, en supposant que le nœud de texte est la seule chose à l'intérieur de l'option (et non d'autres balises).

EDIT: Ah oui, comme d'autres ont mentionné, j'ai complètement oublié:

myOptionNode.text; 

Answer 3

var mySelect = document.forms["my_form"].my_dropdown; 
// or if you select has a id 
var mySelect = document.getElementById("my_dropdown"); 
var text = mySelect.options[mySelect.selectedIndex].text; 

Answer 4

Si vous utilisez Prototype, vous pouvez obtenir à elle comme ceci:

$$('#my_dropdown option[value=1]').each(function(elem){ 
       alert(elem.text); 
      }); 

Ce qui précède utilise un sélecteur CSS qui indique trouver tous option étiquettes avec valeur = "1" qui sont à l'intérieur de l'élément qui a id = "my_dropdown".

Answer 5

En supposant que vous ayez légèrement modifié votre code pour avoir un identifiant/classe sur le et que vous utilisiez jQuery, vous pourriez avoir quelque chose comme: Il apparaîtra une alerte pour chaque option avec le texte de l'option. Vous ne voudrez probablement pas d'alerte pour tout le texte, mais il illustre comment obtenir le texte en premier lieu:

 
$('select#id option').each(function() { 
    alert($(this).text()); 
}); 

Si vous utilisez une classe au lieu d'une carte d'identité, alors vous avez juste pour changer le 'select # id' en 'select.class'. Si vous ne souhaitez pas ajouter de classe/ID, il existe d'autres moyens d'accéder à la sélection.

Je pars trouver ces chemins si vous voulez suivre cette route comme une activité pour le lecteur.

Answer 6

En supposant que vous voulez que le sélectionné l'option de texte:

var select = document.getElementById('my_dropdown'); 
for(var i = 0; i < select.options.length; i++) { 
    if(select.options[i].selected) { 
     break; 
    } 
} 
var selectText = select.options[i].text; 

Dans Prototype:

var selectText = $$('#my_dropdown option[selected]')[0].text; 

Edit: Et jQuery pour bien être complet (en supposant le soutien du sélecteur CSS jQuery est à peu près équivalente à celle de prototypes):

var selectText = $('#my_dropdown option[selected]').get(0).text;