Html select element selected option

Поле выбора значения из раскрывающегося списка.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент используется, когда нужно показать выпадающий список.

Пример

Скопировать ссылку «Пример» Скопировано

   Ваш город         form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>

Подробно

Скопировать ссылку «Подробно» Скопировано

В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

задать тегу атрибут name ;
задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .

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

Внутри тега могут использоваться только теги и .

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

Тег используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.

autocomplete

Скопировать ссылку «autocomplete» Скопировано

Разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.

autofocus

Скопировать ссылку «autofocus» Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled

Скопировать ссылку «disabled» Скопировано

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

form

Скопировать ссылку «form» Скопировано

Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.

multiple

Скопировать ссылку «multiple» Скопировано

Атрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.

name

Скопировать ссылку «name» Скопировано

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required

Скопировать ссылку «required» Скопировано

Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.

size

Скопировать ссылку «size» Скопировано

Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:

   Нестандартная стрелочка             form> label for="city-select">Нестандартная стрелочкаlabel> div class="select-wrapper"> select name="city" id="city-select"> option selected disabled>-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> div> form>

В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .

 .select-wrapper  position: relative;> .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none;> select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px;> .select-wrapper  position: relative; > .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none; > select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px; >

Используем свойство appearance , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.

Источник

HTMLSelectElement: selectedOptions property

The read-only HTMLSelectElement property selectedOptions contains a list of the elements contained within the element that are currently selected. The list of selected options is an HTMLCollection object with one entry per currently selected option.

An option is considered selected if it has an HTMLOptionElement.selected attribute.

Value

An HTMLCollection which lists every currently selected HTMLOptionElement which is either a child of the HTMLSelectElement or of an HTMLOptGroupElement within the element.

In other words, any option contained within the element may be part of the results, but option groups are not included in the list.

If no options are currently selected, the collection is empty and returns a length of 0.

Examples

HTML

label for="foods">What do you want to eat?label>br /> select id="foods" name="foods" size="7" multiple> option value="1">Burritooption> option value="2">Cheeseburgeroption> option value="3">Double Bacon Burger Supremeoption> option value="4">Pepperoni Pizzaoption> option value="5">Tacooption> select> br /> button name="order" id="order">Order Nowbutton> p id="output">p>

The element is set to allow multiple items to be selected, and it is 7 rows tall. Note also the , whose role it is to trigger fetching the HTMLCollection of selected elements using the selected property.

JavaScript

The JavaScript code that establishes the event handler for the button, as well as the event handler itself, looks like this:

let orderButton = document.getElementById("order"); let itemList = document.getElementById("foods"); let outputBox = document.getElementById("output"); orderButton.addEventListener( "click", () =>  let collection = itemList.selectedOptions; let output = ""; for (let i = 0; i  collection.length; i++)  if (output === "")  output = "Your order for the following items has been placed: "; > output += collection[i].label; if (i === collection.length - 2 && collection.length  3)  output += " and "; > else if (i  collection.length - 2)  output += ", "; > else if (i === collection.length - 2)  output += ", and "; > > if (output === "")  output = "You didn't order anything!"; > outputBox.innerHTML = output; >, false, );

This script sets up a click event listener on the «Order Now» button. When clicked, the event handler fetches the list of selected options using selectedOptions , then iterates over the options in the list. A string is constructed to list the ordered items, with logic to build the list using proper English grammar rules (including a serial comma).

Result

The resulting content looks like this in action:

Specifications

Источник

Manipulation of HTML Select Element with Javascript

Manipulation of the element with Javascript is quite commonly required in web applications. This tutorial explains how you can perform common operations on select element with vanilla Javascript — adding/deleting options or getting/setting the selected options.

Important Properties and Methods of Select Element

value : It gives the value of the first selected option (a multi-valued select may have multiple selected options)
options : It gives the list of all option elements in the select
selectedOptions : It gives the list of option elements that are currently selected
selectedIndex : It is an integer that gives the index of first selected option. In case no option is selected, it gives -1
add() : This method adds a new option to the list of options
remove() : This method removes an option from the select element

Important Properties of Option Element

value : It gives the value of the option
text : It gives the text inside the option
selected : It tells whether the option is selected or not

Setting Value of Select Element

For a single valued select, setting its value can be done with the value or the selectedIndex property.

// Set option with value 'Orange' as selected document.querySelector('#choose-fruit').value = 'Orange'; // Set the option with index 2 as selected => Sets the 'Banana' option as selected document.querySelector('#choose-fruit').selectedIndex = 2;

For a multiple valued select, setting multiple selected options can be done by setting the selected attribute of the required option.

// choose the first option document.querySelector('#choose-fruit-multiple').options[0].selected = true; // also choose the third option document.querySelector('#choose-fruit-multiple').options[2].selected = true;

This will obviously work for single valued select also, but using the value property is much direct for them.

Getting the Value and Text/Label of the Selected Options

The selectedOptions property of the select element gives the list of options that are currently selected. Each element in this list is a DOM element — so you can use the value and text property to get the value and inside text of the option.

// For a normal select (and not multi-select) the list would contain only a single element var text = document.querySelector('#choose-fruit').selectedOptions[0].text; var value = document.querySelector('#choose-fruit').selectedOptions[0].value;

For a multiple select element, you can loop over the list to get all selected options.

var selected_options = document.querySelector('#choose-fruit-multiple').selectedOptions; for(var i=0; i // output Orange 2 Grapes 5

Adding an Option

The add method can be used to add a new option in the select. You can also specify the exact positon where the option needs to be inserted.

var option = document.createElement('option'); option.text = 'BMW'; // append option at the end // new options will be Volvo, Audi, Mercedes & BMW document.querySelector('#choose-car').add(option, null);

var option = document.createElement('option'); option.text = 'BMW'; // append option before index 0 // new options will be BMW, Volvo, Audi & Mercedes document.querySelector('#choose-car').add(option, 0);

var option = document.createElement('option'); option.text = 'BMW'; // append option before index 2 // new options will be Volvo, Audi, BMW & Mercedes document.querySelector('#choose-car').add(option, 2);

Deleting an Option

The remove method can be used to delete an option at a specified index.

// remove the option at index 1 // new options will be Volvo & Mercedes document.querySelector('#choose-car').remove(1);

Источник