javascript, uzyskaj listę wszystkich wartości w polu wyboru

Question

Jestem zaskoczony. Mam formularz z listą rozwijaną i chciałbym pobrać listę wszystkich wartości z listy. Wyciągnąłem poniższy przykład ze szkół w3 (tak, wiem, że to niewiarygodne, ale inne rozwiązania na przepełnieniu stosu wydają się bardzo podobne do tego). To nie działało dla mnie i próbowałem podłączyć go do jsfiddle, ale bez powodzenia.

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

Nie działa na jsfiddle: http://jsfiddle.net/WfBRr/1/

Jednak to działa na ich stronie: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2

jakieś pomysły w jaki sposób rozwiązać ten problem?

Answer 1

Masz dwa problemy:

1) Kolejność, w jakiej zawarłeś kod HTML. Zmień ustawienia z "onLoad" na "no wrap-head" w ustawieniach JavaScriptu skrzypiec.

2) Twoja funkcja drukuje wartości. To, o co tak naprawdę chodzi, to tekst, który zamiast tego jest oznaczony jako ;

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

Answer 2

Zmiana:

x.length 

do:

x.options.length 

Link do fiddle

I zgadzam się z Abrahamem - może chcesz używać text zamiast value

Aktualizacja
Powodem Twój skrzypce nie działał dlatego wybrał opcję: „onLoad” zamiast: „No Wrap - w”

Answer 3

to wygląda umieszczenie zdarzenie click bezpośrednio na jest przyczyną problemu. Z jakiegoś powodu nie może znaleźć funkcji. Nie wiem, dlaczego ...

Jeśli dołączysz obsługę zdarzeń do javascript, to jednak działa.

Zobacz tutaj: 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); 
} 

Answer 4

Zgodnie struktury DOM można skorzystać z poniższego kodu:

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 + ","; 
     }