Выбор <option> из <select> с помощью JavaScript в Google Chrome

Question

Я пытаюсь, чтобы JavaScript прослушивал событие, когда выбран вариант. И как только JavaScript узнает, что я нажал одну из этих опций, он должен обновить функцию кнопки отправки. Это очень похоже на просто встроенный onclick="" встроенный в каждую опцию, но в более безопасной настройке (которая также не работает в Chrome). Так что это мой небольшой кусочек кода, и он работает в Firefox, IE, но не в Chrome.

HTML:

                <select>
                    <option id="zero">--</option>
                    <option id="one">Choice one</option>
                    <option id="two">Choice Two</option>
                    <option id="three">Choice Three</option>
                  </select>

                  <button id="submit">Submit</button>

JavaScript:

        function _(el)
{
    return document.getElementById(el);
}
function resetOption()
{
    _('submit').setAttribute('onclick', '');
    _('submit').value = "Choose location";

}
function optionOneChosen()
{
    _('submit').setAttribute('onclick', 'functionOne()');
    _('submit').value = "Location one";
}
function optionTwoChosen() 
{
    _('submit').setAttribute('onclick', 'functionTwo()');
    _('submit').value = "Location two";   
}
function optionThreeChosen() 
{
    _('submit').setAttribute('onclick', 'functionThree()');
    _('submit').value = "Location three";   
}

        document.addEventListener('DOMContentLoaded', function ()
{

    _('zero').addEventListener('click', resetOption);
    _('one').addEventListener('click', optionOneChosen);
    _('two').addEventListener('click', optionTwoChosen);
    _('three').addEventListener('click', optionThreeChosen);
});

Я попытался выполнить некоторую отладку, и похоже, что система разрывается внутри функции 'DOMContentLoaded', как будто Chrome не распознает свойство, к которому я пытаюсь получить доступ. Так чего мне не хватает? Или в этом отношении, Chrome реализует функции безопасности, которые другие браузеры еще не стандартизировали? Благодаря тонну! Джеффри

Answer 1

Это даст тот же результат:

var select = document.querySelector("select"),
    button = document.querySelector("button");

select.addEventListener("change", function(e) {
    var option = this.options[this.selectedIndex];

    switch (option.id) {
        case "zero": button.value = "Choose Location"; break;
        case "one": button.value = "Location one"; break;
        case "two": button.value = "Location two"; break;
        case "three": button.value = "Location three"; break;
    }
});

играть на скрипке