web-dev-qa-db-fra.com

javascript, obtenir la liste de toutes les valeurs dans la zone de sélection

Je suis perplexe. J'ai un formulaire avec une liste déroulante et j'aimerais saisir une liste de toutes les valeurs de la liste. J'ai tiré l'exemple ci-dessous dans les écoles W3 (oui, je sais que ce n'est pas fiable, mais d'autres solutions sur le dépassement de capacité de la pile semblent très similaires à celles-ci). Cela ne fonctionnait pas pour moi et j'ai essayé de le brancher sur jsfiddle, mais pas de chance.

HTML:
<form>Select your favorite fruit:
    <select id="mySelect">
        <option value="a">Apple</option>
        <option value="o">Orange</option>
        <option value="p">Pineapple</option>
        <option value="b">Banana</option>
    </select>
</form>
<button type="button" onclick="displayResult()">Display text of all options</button>

javascript:

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

Ne fonctionne pas sur jsfiddle: http://jsfiddle.net/WfBRr/1/

Cependant, cela fonctionne sur leur site: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2

Des idées sur la façon de résoudre ceci?

javascripthtmlformsselection
19
dmkumar

Vous avez eu deux problèmes: 

1) L'ordre dans lequel vous avez inclus le code HTML. Essayez de remplacer le menu déroulant "onLoad" par "no wrap-head" dans les paramètres JavaScript de votre violon.

2) Votre fonction imprime les valeurs. Ce que vous cherchez réellement, c'est le texte

x.options[i].text; au lieu de x.options[i].value;

http://jsfiddle.net/WfBRr/5/

25
Abraham P

Changement:

x.length

à:

x.options.length

Lien vers violon

Et je suis d’accord avec Abraham - vous voudrez peut-être utiliser text au lieu de value

Mettre à jour
Si votre violon n’a pas fonctionné, c’est parce que vous avez choisi l’option "onLoad" au lieu de: "No wrap-in".

6
alfasin

Selon la structure du DOM, vous pouvez utiliser le code ci-dessous: 

var x = document.getElementById('mySelect');
     var txt = "";
     var val = "";
     for (var i = 0; i < x.length; i++) {
         txt +=x[i].text + ",";
         val +=x[i].value + ",";
      }
1
Dorjee Karma

Il semble que le fait de placer l'événement click directement sur le bouton soit à l'origine du problème. Pour une raison quelconque, il ne peut pas trouver la fonction. Pas certain de pourquoi...

Si vous attachez le gestionnaire d'événements au javascript, cela fonctionne cependant.

Voir ici: http://jsfiddle.net/WfBRr/7/

<button id="display-text" type="button">Display text of all options</button>

document.getElementById('display-text').onclick = function () {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}
0
Fuzzley