3 способа получить выбранное значение в раскрывающемся списке с помощью JavaScript
JavaScript предоставляет несколько методов для получения выбранного значения в раскрывающемся списке. В этой статье мы обсудим три наиболее распространенных метода: использование свойства value, использование selectedIndex свойства и использование options коллекции.
Способ 1: использование value свойства
Свойство value элемента select возвращает значение выбранного параметра. В следующем примере показано, как использовать value свойство для получения выбранного значения в раскрывающемся списке:
<html lang="ru">
<head>
<title>Document</title>
</head>
<body>
<select id="mySelect">
<option value="вариант1">вариант 1</option>
<option value="вариант2">вариант 2</option>
<option value="вариант3">вариант 3</option>
</select>
<button onclick="getSelectedValue()">получить Value</button>
<script>
function getSelectedValue() {
let select = document.getElementById("mySelect");
let selectedValue = select.value;
alert(selectedValue);
}
</script>
</body>
</html>
В этом примере у нас есть раскрывающийся список с идентификатором "mySelect" и три параметра со значениями "вариант1", "вариант2" и "вариант3". При нажатии кнопки вызывается функция getSelectedValue(). Функция получает ссылку на элемент select с помощью getElementById() метода и присваивает значение выбранного параметра переменной selectedValue. Затем окно предупреждения используется для отображения выбранного значения.
Способ 2: использование selectedIndex свойства
Свойство selectedIndex элемента select возвращает индекс выбранного параметра. В следующем примере показано, как использовать selectedIndex свойство для получения выбранного значения в раскрывающемся списке:
<html lang="ru">
<head>
<title>Document</title>
</head>
<body>
<<select id="mySelect">
<option value="вариант">вариант 1</option>
<option value="вариант2">вариант 2</option>
<option value="вариант3">вариант 3</option>
</select>
<button onclick="getSelectedValue()">получить Value</button>
<script>
function getSelectedValue() {
let select = document.getElementById("mySelect");
let selectedIndex = select.selectedIndex;
let options = select.options;
let selectedValue = options[selectedIndex].value;
alert(selectedValue);
}
</script>
</body>
</html>
В этом примере у нас снова есть раскрывающийся список с идентификатором "mySelect" и три параметра со значениями "вариант1", "вариант2" и "вариант3". При нажатии кнопки вызывается функция getSelectedValue(). Функция получает ссылку на элемент select с помощью getElementById() метода и присваивает выбранный индекс переменной selectedIndex. Затем он получает ссылку на коллекцию опций и присваивает значение выбранной опции переменной selectedValue.
Способ 3: Использование options коллекции
Свойство options элемента select возвращает коллекцию всех элементов option в раскрывающемся списке. Мы можем использовать эту коллекцию для перебора всех вариантов и поиска выбранного. В следующем примере показано, как использовать options коллекцию для получения выбранного значения в раскрывающемся списке:
<html lang="ru">
<head>
<title>Document</title>
</head>
<body>
<select id="mySelect">
<option value="вариант1">вариант 1</option>
<option value="вариант2">вариант 2</option>
<option value="вариант3">вариант 3</option>
</select>
<button onclick="getSelectedValue()">получить Value</button>
<script>
function getSelectedValue() {
let select = document.getElementById("mySelect");
let options = select.options;
let selectedValue;
for (let i = 0; i < options.length; i++) {
if (options[i].selected) {
selectedValue = options[i].value;
break;
}
}
alert(selectedValue);
}
</script>
</body>
</html>
В этом примере у нас снова есть раскрывающийся список с идентификатором "mySelect" и три параметра со значениями "вариант1", "вариант2" и "вариант3". При нажатии кнопки вызывается функция getSelectedValue(). Функция получает ссылку на элемент select с помощью getElementById() метода и присваивает набор опций переменной options. Затем он использует цикл for для перебора всех параметров и проверки свойства selected каждого параметра. Если свойство true, оно присваивает значение параметра переменной selectedValue и выходит из цикла. затем Окно предупреждения используется для отображения выбранного значения.
