Тег OPTION

⚠️ Bymas - Форум разработчиков

Описание

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

Синтаксис

<select>
 <option>Пункт 1</option>
 <option>Пункт 2</option>
</select>

Параметры

selected
Заранее устанавливает определенный пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

Закрывающий тег

Не обязателен.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="/cgi-bin/handler.cgi">
<select size="3" name="hero">
<option selected>Выберите героя</option>
<option value="t1">Чебурашка</option>
<option value="t2">Крокодил Гена</option>
<option value="t3">Шапокляк</option>
<option value="t4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>

</body>
</html>

Описание параметров тега <OPTION>

Параметр SELECTED

Описание

Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.

Синтаксис

<option selected>...</option>

Аргументы

Нет.

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

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

Пример 2. Выделение пункта списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<form action="/cgi-bin/handler.cgi">
<select name="hero">
<option selected>Выберите героя</option>
<option value="t1">Чебурашка</option>
<option value="t2">Крокодил Гена</option>
<option value="t3">Шапокляк</option>
<option value="t4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить">
</form>

</body>
</html>

Параметр VALUE

Описание

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. Также параметр value применяется для получения значений данных через скрипты.

Синтаксис

<option value="значение">...</option>

Аргументы

Любая текстовая строка заключенная в двойные или одинарные кавычки.

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

Нет.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>