Comment puis-je accéder à la “affiché” le texte d'une zone de sélection d'option dans les DOM?

Donné le code HTML suivant:

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

Comment puis-je récupérer la chaîne "texte affiché à l'écran 1" à l'aide de Javascript/DOM?

OriginalL'auteur Marcus | 2008-10-10

  1. 10
    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;
    }
}
    c'est en supposant qu'il y a un id d'étiquette sur la boîte de sélection.
    Ce code est pour l'option sélectionnée, si l' .attribut de texte de travail pour l'une des options (sélectionné ou pas) une fois que vous les obtenir à partir des options[] liste.
    Il y a un id @Adam - jour
    Cool. Il n'y avait pas une pièce d'identité quand j'ai quitté le commentaire.

    OriginalL'auteur Liam

  2. 4
    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;
    Encore une fois, l'exemple de code ici l'hypothèse qu'il veut de l'option sélectionnée. Son exemple a qu'une seule option, de sorte que cela fonctionnera, mais le cas général serait de fournir quelque indice options [options].
    eh bien c'est vrai mais le sujet starter n'a pas défini la situation initiale. Je suppose qu'il veulent pour obtenir le texte actuel de l'option sélectionnée. Si il veut le texte d'une option et ne connaît que la valeur qu'il aura à utiliser une boucle. La méthode d'accès est le même.
    Hypothèse est correcte: je ne veux l'option sélectionnée, mais je l'ai dit.

    OriginalL'auteur Joe Scylla

  3. 2

    En supposant que vous voulez le sélectionné de 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;

    À L'État De Prototype:

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

    Edit: Et jQuery à des fins d'exhaustivité (en supposant que jQuery CSS sélecteur de soutien est à peu près équivalent à celui de Prototype):

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

    OriginalL'auteur eyelidlessness

  4. 1

    Le texte affiché à l'écran est un nœud enfant de l'option nœud. Vous pouvez utiliser:

    myOptionNode.childNodes[0];

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

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

    myOptionNode.text;
    Qui d'autres contenus pensez-vous serait à l'intérieur d'une option ?-) C'est tout simplement invalide mettre autre chose à l'intérieur !-)
    C'est vrai, c'est nul, mais je n'avais pas testé, donc je ne suis pas sûr qu'arriverait-il si, par exemple, tu mets un <span> à l'intérieur d'une option. Des navigateurs vous permettent de sortir avec déglingués choses, parfois.

    OriginalL'auteur Adam Bellaire

  5. 1

    En supposant que vous avez modifié votre code un peu pour avoir une id de la classe sur la et ont été à l'aide de jQuery, vous pourriez avoir quelque chose comme ce qui suit. Il affichera 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'un id, alors vous avez juste à changer le 'select#id' pour 'select.class'. Si vous ne voulez pas d'ajouter une classe/id il y a d'autres façons d'obtenir au select.

    Je laisse trouver ces moyens si vous voulez aller dans cette voie comme une activité pour le lecteur.

    OriginalL'auteur Leanan

  6. 0

    Si vous avez été en utilisant Prototype, vous pourriez obtenir comme ceci:

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

    Ci-dessus à l'aide d'un sélecteur CSS qui dit trouver tous les option balises avec value="1" qui sont à l'intérieur de l'élément qui a id="my_dropdown".

    OriginalL'auteur Mark Biek