Тег OPTION

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

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

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

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

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

<html>
<body>

<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>

</body>
</html>

Результат примера


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

Параметр SELECTED

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

Синтаксис
<option selected>...</option>

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

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

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

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

Параметр VALUE

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

Синтаксис
<option value=значение>...</option>

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

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

Пример 3. Установка значения пункта списка

<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>

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