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

Любые идеи о том, как это решить?

Ответ 1

У вас было две проблемы:

1) Порядок, в который вы включили HTML. Попробуйте изменить раскрывающийся список с "onLoad" на "no wrap-head" в настройках JavaScript вашей скрипки.

2) Ваша функция печатает значения. То, что вы на самом деле, это текст

x.options[i].text; вместо x.options[i].value;

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

Ответ 2

Изменение:

x.length

в:

x.options.length

Ссылка на скрипку

И я согласен с Авраамом - вы можете использовать text вместо value

Обновление
Причина, по которой ваша скрипка не сработала, заключалась в том, что вы выбрали опцию: "onLoad" вместо: "Без переноса"

Ответ 3

Похоже, что нажатие кнопки непосредственно на кнопку вызывает проблему. По какой-то причине он не может найти функцию. Не знаете, почему...

Если вы прикрепляете обработчик событий в 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);
}

Ответ 4

В соответствии с структурой 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 + ",";
      }