web-dev-qa-db-ja.com

javascript、選択ボックス内のすべての値のリストを取得

私は困惑しています。ドロップダウンリストのあるフォームがあり、リスト内のすべての値のリストを取得したいと思います。私はw3の学校から以下の例を引き出しました（はい、それは信頼できないことはわかっていますが、スタックオーバーフローの他の解決策はこれに非常に似ているようです）。それは私のために働いていなかった、と私はjsfiddleにプラグインしようとしましたが、運はありませんでした。

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);
}

Jsfiddleで動作しない： http://jsfiddle.net/WfBRr/1/

ただし、サイトでは機能します。 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2

これを解決する方法についてのアイデアはありますか？

javascripthtmlformsselection
23
dmkumar

次の2つの問題がありました。

1）HTMLを含めた順序。フィドルのJavaScript設定で、ドロップダウンを「onLoad」から「no wrap-head」に変更してみてください。

2）関数は値を出力します。あなたが実際に求めているのはテキストです

x.options[i].text; の代わりに x.options[i].value;

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

28
Abraham P

変化する：

x.length

に：

x.options.length

fiddle へのリンク

そして、私はアブラハムに同意します-あなたはtextの代わりにvalueを使いたいかもしれません

更新
フィドルが機能しなかった理由は、「No wrap-in」ではなく「onLoad」オプションを選択したためです。

7
alfasin

クリックイベントをボタンに直接配置すると問題が発生するようです。何らかの理由で、関数が見つかりません。なぜかわからない...

ただし、javascriptにイベントハンドラーをアタッチすると、機能します。

こちらをご覧ください： 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);
}
2
Fuzzley

DOM構造に従って、以下のコードを使用できます。

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