Работа с пунктами выпадающего списка на JavaScript

Пусть у нас в переменной есть ссылка на тег option. Например, полученная следующим образом:

let select = document.querySelector('#select'); let option = select[0];

В этом случае в свойстве text будет хранится текст оптиона, в свойстве value - значение одноименного атрибута, а в свойстве selected - значение true или false в зависимости от того, выбранный пункт списка или нет:

console.log(option.text); console.log(option.value); console.log(option.selected);

Переберите пункты списка циклом и для выбранного пункта в конец текста добавьте восклицательный знак, а для невыбранных пунктов - вопросительный.

Выбор пункта списка

В предыдущих уроках мы обращались к тегу select, получая или меняя выбранный пункт списка. Это на самом деле не обязательно. Ведь можно взять и непосредственно какому-нибудь тегу option установить свойство selected в значении true.

К примеру, сделаем выбранным пункт списка с номером два:

let select = document.querySelector('#select'); let option = select[2]; option.selected = true;

Дан выпадающий список и кнопка. По клику на кнопку сделайте отмеченным последний пункт списка.

Получение выбранного оптиона

Используя все изученное, можно получить выбранный тег option следующим образом:

let select = document.querySelector('#select'); console.log(select[select.selectedIndex]);

Дан селект и кнопка. По нажатию на кнопку выведите на экран текст отмеченного пункта списка.

Дан селект и кнопка. По нажатию на кнопку добавьте в конец текста выбранного пункта восклицательный знак.