Select JS: инструмент для работы с элементами форм и таблиц на JavaScript
Select в JavaScript - это объект, который предназначен для управления списками выбора на веб-страницах. Он позволяет выбирать элементы из предварительно определенных списков и предоставляет возможность манипулировать выбранными элементами.
Для создания select-элемента можно использовать HTML-тег
В JavaScript select можно получить с помощью метода getElementById():
let select = document.getElementById("mySelect");
С помощью свойства length можно получить количество элементов в списке выбора:
let selectLength = select.length;
Чтобы получить выбранный элемент, можно использовать свойства selectedIndex или value:
let selectedOption = select.options[select.selectedIndex];
console.log(selectedOption.value); //значение выбранного элемента
или
let selectedValue = select.value;
console.log(selectedValue); //значение выбранного элемента
Также можно добавлять или удалять элементы из списка выбора. Для этого нужно создать новый элемент option и добавить его в список с помощью метода appendChild():
let newOption = document.createElement("option");
newOption.text = "Опция 4";
newOption.value = "4";
select.appendChild(newOption);
Чтобы удалить элемент, нужно использовать метод remove():
select.options[3].remove(); //удалить 4-й элемент списка
Также можно изменять значения и текст элементов списка:
select.options[2].value = "newValue";
select.options[2].text = "Новый текст";
В целом, объект select в JavaScript предоставляет широкие возможности для работы со списками выбора на веб-странице, позволяя взаимодействовать с отдельными элементами, добавлять и удалять элементы, изменять их значения и текст. Ниже приводим полный код работы со списком выбора:
HTML:
JavaScript:
// Получаем select
let select = document.getElementById("mySelect");
// Получаем количество элементов в списке
let selectLength = select.length;
// Получаем выбранный элемент
let selectedOption = select.options[select.selectedIndex];
// Получаем значение выбранного элемента
let selectedValue = select.value;
// Создаем новый элемент и добавляем его в список выбора
let newOption = document.createElement("option");
newOption.text = "Опция 4";
newOption.value = "4";
select.appendChild(newOption);
// Удаляем элемент списка
select.options[3].remove();
// Изменяем значение и текст элемента списка
select.options[2].value = "newValue";
select.options[2].text = "Новый текст";