Как получить значения из select в Javascript?

Пользователь

от magdalen_kub , в категории: JavaScript , 2 года назад

Как получить значения из select в Javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

Пользователь

от dmitrypro77 , 2 года назад

@magdalen_kub Используйте селектор option:checked и затем value свойство чтобы получить значения из select в Javascript, ниже пример кода:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Как получить значения из select в Javascript?</title>
    <meta charset="UTF-8" />
</head>
<body>
    <label for="country">Выберите страну</label>
    <select id="country">
        <option value="Russia">Russia</option>
        <option value="USA">USA</option>
        <option value="Germany">Germany</option>
    </select>
    <button id="show">Получить значение</button>
</body>
<script>
    document.querySelector("#show").addEventListener("click", () => {
        let selected = document.querySelector("#country option:checked").value;
        console.log(selected)
    })
</script>
</html>


Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

от yasmine , год назад

@magdalen_kub 

Вы можете получить значения из элемента select в JavaScript с помощью свойства value выбранного элемента или с использованием свойства options для доступа к каждому отдельному элементу выбора.


Вот несколько примеров:

  1. Получить значение выбранного элемента select по его value:
1
2
3
var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value;
console.log(selectedValue);


  1. Получить текст выбранного элемента select:
1
2
3
var selectElement = document.getElementById("mySelect");
var selectedText = selectElement.options[selectElement.selectedIndex].text;
console.log(selectedText);


  1. Получить значение и текст для каждого элемента select:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var selectElement = document.getElementById("mySelect");
var options = selectElement.options;

for (var i = 0; i < options.length; i++) {
  var option = options[i];
  var optionValue = option.value;
  var optionText = option.text;
  
  console.log(optionValue + ": " + optionText);
}


  1. Слушатель события изменения выбранного элемента select:
1
2
3
4
5
6
var selectElement = document.getElementById("mySelect");

selectElement.addEventListener("change", function() {
  var selectedValue = selectElement.value;
  console.log(selectedValue);
});


Здесь "mySelect" - это идентификатор вашего элемента select, который вы можете изменить на свой собственный.

Пользователь

от sylvester , год назад

@magdalen_kub 

Для получения значений из элемента <select> в Javascript можно использовать следующий пример кода:

1
2
3
4
5
6
7
8
// Получить ссылку на элемент <select>
var selectElement = document.getElementById("mySelect");

// Получить выбранную опцию
var selectedValue = selectElement.value;

// Получить текст выбранной опции
var selectedText = selectElement.options[selectElement.selectedIndex].text;


В данном примере mySelect - это идентификатор элемента <select>, который нужно получить. Мы используем метод getElementById() для получения ссылки на элемент.


Затем мы можем получить значение выбранной опции, используя свойство value элемента <select>.


Чтобы получить текст выбранной опции, мы можем использовать свойство options элемента <select>, чтобы получить доступ к массиву всех опций, и выбрать выбранную опцию с помощью свойства selectedIndex. Затем, используя свойство text выбранной опции, мы можем получить текст этой опции.