Тег OPTION
| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox |
|---|
| Версия | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
|---|
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
|---|
Описание
Тег <OPTION> определяет отдельные пункты списка, создаваемого с помощью контейнера <SELECT>. Ширина списка определяется самым широким текстом, указанным в теге <OPTION>, а также может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <SELECT> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.
Синтаксис
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Параметры
- selected
- Заранее устанавливает определенный пункт списка выделенным.
- value
- Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.
Закрывающий тег
Не обязателен.
Пример 1. Использование тега <OPTION>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег OPTION</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p><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></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Описание параметров тега <OPTION>
Параметр SELECTED
Описание
Делает текущий пункт списка выделенным. Если у тега <SELECT> добавлен параметр multiple, то можно выделять более одного пункта.
Синтаксис
<option selected>...</option>
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Пример 2. Выделение пункта списка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег OPTION, параметр selected</title>
</head>
<body>
<form action="/cgi-bin/handler.cgi">
<p><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="Отправить"></p>
</form>
</body>
</html>
Параметр VALUE
Описание
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается параметром name тега <SELECT>, а значение — параметром value выделенных пунктов списка. Значение может, как совпадать с текстом пункта, так быть и самостоятельным. Также параметр value применяется для получения значений данных через скрипты.
Синтаксис
<option value="значение">...</option>
Аргументы
Любая текстовая строка заключенная в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Обращение к элементу списка
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег OPTION, параметр value</title>
<script type="text/javascript">
function dataSelect(f) {
n = f.hero.selectedIndex
if(n) alert("Выбран герой: " + f.hero.options[n].value)
}
</script>
</head>
<body>
<form action="handler.php">
<p><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)"></p>
</form>
</body>
</html>
ПОЛЕЗНЫЕ СОВЕТЫ JAVASCRIPT + CSS