Тег SELECT

Тег SELECT позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования параметра size тега SELECT, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге OPTION, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега OPTION, который должен быть вложен в контейнер SELECT. Если планируется отправлять данные списка на сервер, то требуется поместить элемент SELECT внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Синтаксис
<form>
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
</form>

Закрывающий тег
Обязателен.

Параметры
disabled — блокирует доступ и изменение элемента.
multiple — позволяет выбрать несколько параметров из списка.
name — имя элемента для отправки на сервер или обращения через скрипты.
size — количество отображаемых строк списка.

Пример 1. Использование тега SELECT

<html>
<body>

<select size=3 multiple name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>

</body>
</html>

Описание параметров тега SELECT

Параметр DISABLED

Описание
Блокирует доступ и изменение элементов списка.

Синтаксис
<select disabled>...</select>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 2. Блокировка списка

<html>
<body>
<select disabled name=hero>
<option selected>Выберите героя</option>
<option value=t1>Чебурашка</option>
<option value=t2>Крокодил Гена</option>
<option value=t3>Шапокляк</option>
<option value=t4>Крыса Лариса</option>
</select>
</body>
</html>

Параметр MULTIPLE

Описание
Наличие параметра multiple сообщает браузеру отображать содержимое элемента SELECT как список множественного выбора. Конечный вид списка зависит от используемого параметра size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше, чем число пунктов, то появляется вертикальная полоса прокрутки. Когда size=1 список превращается «крутилку», как показано ниже, но выбирать с помощью нее одновременно несколько пунктов списка неудобно.

Для выбора нескольких значений списка применяются клавиши <Ctrl> и <Shift> совместно с курсором мыши.

Параметр size отсутствует Параметр size равен 1

Синтаксис
<select multiple>...</select>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 3. Список множественного выбора

<html>
<body>
<select multiple size=1>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select>
</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя элемента SELECT. Как правило, это имя используется для доступа к данным через скрипты.

Синтаксис
<select name=имя>...</select>

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу SELECT по имени соблюдайте ту же форму написания, что и в параметре name.

Значение по умолчанию
Нет.

Пример 4. Обращение к элементу списка

<html>
<head>
<script language="JavaScript">
function dataSelect(f) {
n = f.hero.selectedIndex
if(n) alert("Выбран герой: " + f.hero.options[n].value)
}
</script>
</head>
<body>

<form>
<select name=hero>
<option>Выберите героя</option>
<option value="Чебурашка">Чебурашка</option>
<option value="Крокодил Гена">Крокодил Гена</option>
<option value="Шапокляк">Шапокляк</option>
<option value="Крыса Лариса">Крыса Лариса</option>
</select>
<input type=button value="OK" onClick="dataSelect(this.form)">
</form>

</body>
</html>

Параметр SIZE

Описание
Устанавливает высоту списка. Если значение параметра size равно единице, то список превращается в раскрывающийся. При добавлении параметра multiple к тегу SELECT при size=1 список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис
<select size=число>...</select>

Аргументы
Любое положительное целое число.

Значение по умолчанию
Зависит от параметра multiple. Если он присутствует, то размер списка равен количеству элементов. Когда параметра multiple нет, то по умолчанию значение параметра size равно 1.

Пример 5. Высота списка

<html>
<body>
<select size=1>
<option selected>Выберите героя</option>
<option>Чебурашка</option>
<option>Крокодил Гена</option>
<option>Шапокляк</option>
<option>Крыса Лариса</option>
</select>
</body>
</html>

Материал взят с сайта htmlbook.ru