Обновить переменные скрипта значением из выпадающего списка?

#javascript

Вопрос:

У меня есть скрипт, который в основном выглядит так (часть, с которой мне нужна помощь):

 <script>
var languageFrom = " from ";
var languageTo = " to ";
</script>

Если бы у меня было выпадающее меню, которое выглядело бы так:

 <select>
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

Когда вы выбираете одно из выпадающих меню, оно заполняет from переменную текстом из значения параметра. Как вы можете этого добиться? Есть ли какие-либо руководства по этому вопросу?

Ответ №1:

Вы можете привязать change обработчик событий к select элементу:

 document.getElementById("yourSelect").onchange = function() {
    languageFrom = this.value;
}

Обратите внимание, что это предполагает id из yourSelect для select элемента, а также предполагает, что languageFrom находится в области действия функции обработчика событий (возможно, глобальной).

1. Это сработало бы для одной переменной, но что, если бы их было 2, как в моем коде? Таким образом, один выпадающий список будет управлять первой переменной, а второй выпадающий список будет управлять второй переменной.

2. Просто привяжите change обработчик событий к другому select элементу, точно так, как показано в моем ответе.

3. Да, именно так, но не забудьте объявить переменные languageFrom и languageTo (что вы сделали в своем вопросе, но не в скрипке).

4. Это то, что я пропустил! Как мне затем заполнить переменную тем, что было изменено в функции изменения?

5. Я не совсем уверен, что ты имеешь в виду. В вашей скрипте, если вы объявляете переменные вне функций обработчика событий, они будут находиться в области видимости внутри функций, и их значения будут изменены.

Ответ №2:

 selectNode.addEventListener("change", function(evt) {
        languageFrom=languageTo;
        languageTo = evt.target.value;
    },false);