Тег SELECT

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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


Список множественного выбора	Раскрывающийся список

Синтаксис

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

Параметры

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

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

Обязателен.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

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

Параметр DISABLED

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

Нет.

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

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

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег SELECT, параметр disabled</title>
 </head>
 <body>

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

 </body>
</html>

Параметр MULTIPLE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

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


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

Синтаксис

Аргументы

Нет.

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

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

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег SELECT, параметр multiple</title>
 </head>
 <body>

  <form action="handler.php">
    <p><select multiple size="1">
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
    </select></p>
  </form>

 </body>
</html>

Параметр NAME

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

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

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

Нет.

Пример 4. Обращение к списку по его имени

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег SELECT, параметр name</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>

Параметр SIZE

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

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

Синтаксис

Аргументы

Любое положительное целое число.

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

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

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег SELECT, параметр multiple</title>
 </head>
 <body>

  <form action="handler.php">
   <p><select size="1">
    <option selected>Выберите героя</option>
    <option>Чебурашка</option>
    <option>Крокодил Гена</option>
    <option>Шапокляк</option>
    <option>Крыса Лариса</option>
   </select></p>
  </form>

 </body>
</html>