MyTetra Share
Делитесь знаниями!
Выпадающий список с пустым элементом по умолчанию в HTML
Время создания: 30.07.2018 13:03
Автор: br0ke
Текстовые метки: html, markup, web, select, option, blank, default, jquery, dropdown, javascript
Раздел: Информационные технологии - Web - HTML
Запись: and-semakin/mytetra_data/master/base/1532937816e84j8lx7dv/text.html на raw.githubusercontent.com

Обычный выпадающий список по умолчанию выбирает первый доступный элемент по умолчанию. Из-за этого пользователь может не поменять этот элемент и допустить ошибку при заполнении формы. Чтобы принудить пользователя вручную выбрать правильный вариант, нужно сменить элемент по умолчанию на какое-то сообщение.


Способ первый:


В выпадающем списке по умолчанию будет выбран элемент '-- select an option --', и если выбрать другой элемент, то снова выбрать элемент по умолчанию уже не получится.


<select>

<option disabled selected value> -- select an option -- </option>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>


Также его можно скрыть из списка, добавив ему стиль:

<option style="display:none">


Способ второй:


При помощи JavaScript установить выбранный элемент в -1 (не существует). Тогда в выпадающем списке по умолчанию будет пустая строка. В списке элементов она, естесственно, не отобразится.


<select id="myDropdown">

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>


document.getElementById("myDropdown").selectedIndex = -1;


Или jQuery:


$("#myDropdown").prop("selectedIndex", -1);



Так же в этом разделе:
 
MyTetra Share v.0.59
Яндекс индекс цитирования