Select

Объект Select представляет собой HTML элемент <select>.

Свойства и Методы объекта Select

add()

Метод add используется для добавления элемента в выпадающий список.

Синтаксис

selectObject.add( option, [index])

Параметры

option

Необходимые. Определяет новый элемент Option

index

Необязательный. Целое число, указывающее индекс позиции для того, где должен быть вставлен новый элемент. Индекс начинается с 0. Если не указан индекс, новый вариант будет вставлен в конце списка

Возвращаемое значение

Нет возвращаемого значения

Пример

<select id="i" size="3">
  <option>Абрикос</option>
  <option>Апельсин</option>
  <option>Банан</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Заменть Банан на Киви </button> 
<script>
function f() { x = document.getElementById("i");
  var option = document.createElement("option");
  option.text = "Киви";
  x.remove(2);
  x.add(option,2);
document.getElementById("demo").innerHTML = 2; }
</script>

disabled

Свойство disabled устанавливает или возвращает значение атрибута disabled.

Синтаксис

selectObject.disabled [ = true|false ]

• true - блокируется доступ и изменение элементов списка.
• false - по умолчанию. Выпадающий список НЕ блокируется.

Возвращаемое значение

Логический, возвращает true, если раскрывающийся список отключен (блокирован), в противном случае - false.

Пример

<select id="mySelect">
  <option>Коты</option>
  <option>Собаки</option>
</select>
<button onclick="f(true)"> Блокировать </button>
<button onclick="f(false)"> РазБлокировать </button>
<script>
function f(n) { document.getElementById("mySelect").disabled = n; }
</script>

form

Свойство form возвращает ссылку на форму, которая содержит элемент.

Синтаксис

selectObject.form

Возвращаемое значение

Ссылка на элемент form, содержащий элемент, или null.

length

Свойство length возвращает число <option> элементов в раскрывающемся списке.

Синтаксис

selectObject.length

Возвращаемое значение

Число, представляющее число <option> элементов , найденных в раскрывающемся списке

Пример

<select id="i">
  <option>Апельсин</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Попробуй </button>
<p id="demo"></p>
<script>
function f() 
 { document.getElementById("demo").innerHTML = 
            document.getElementById("i").length; }
</script>

multiple

Свойство multiple возвращает или устанавливает значение атрибута multiple.

Синтаксис

selectObject.multiple [ = true|false ]

• true - допускается множественный выбор.
• false - по умолчанию. Множественный выбор НЕ допускается.

Возвращаемое значение

Логический, возвращает true, если множественный выбор в раскрывающемся списке включен, в противном случае - false.

Пример

<select id="i" size='4'>
  <option>Апельсин</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f(true)"> multiple = true </button>
<button onclick="f(false)"> multiple = false </button>
<script>
function f(n) { document.getElementById("i").multiple = n; }
</script>

name

Свойство name возвращает или устанавливает значение атрибута name.

Синтаксис

selectObject.name [ = str_name ]

str_name - задает имя элемента Select.

Возвращаемое значение

Строка, представляющая имя элемента Select.

Пример

<select id="i" name="selectName">
  <option>Апельсин</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Узнай имя </button> 
<script>
function f() { document.getElementById("demo").innerHTML = 
               document.getElementById("i").name; }
</script>

options

Свойство options возвращает массив, позволяющий обратиться ко всем пунктам в выпадающем списке..

Синтаксис

selectObject.options

Возвращаемое значение

Объект Options, представляющий все <option> элементы в <select> элементе. Элементы коллекции сортируются, как они появляются в исходном коде

Пример

<select id="i" size="3">
  <option value="1">Абрикос</option>
  <option value="2">Апельсин</option>
  <option value="3">Банан</option>
  <option value="4">Груша</option>
  <option value="5">Слива</option>
  <option value="6">Яблоко</option>
</select>
<button onclick="f()"> Узнать все </button> 
<p id="demo"></p>
<script>
function f() { t = '<b>Value Text</b>';
  x = document.getElementById("i").options;
  for (var i=0; i< x.length; i++) 
    {t += '<br>   ' + x[i].value + '     ' + x[i].text;}
document.getElementById("demo").innerHTML = t; }
</script>

remove()

Метод remove используется для удаления опции из выпадающего списка.

Синтаксис

selectObject.remove( index )

Параметры

index

Необходимые. Определяет индекс опции для удаления. Индекс начинается с 0

Возвращаемое значение

Нет возвращаемого значения

Пример

selectedIndex

Свойство selectedIndex устанавливает или возвращает позицию (индекс) элемента списка.

selectObject.selectedIndex [ = index ]

index - определяет индекс выбранной опции в списке.

Возвращаемое значение

Число, представляющее индекс выбранной опции в списке. Индекс начинается с 0. Если не выбран ни один вариант, возвращенное значение -1

Пример

<select id="i">
  <option>Апельсин</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Попробуй </button> 
<script>
function f() { x = document.getElementById("i");
 x.selectedIndex = 2;
document.getElementById("demo").innerHTML = "2"; }
</script>

size

Свойство size устанавливает или возвращает значение размера выпадающего списка.

Синтаксис

selectObject.size [ = number ] 

numbre - определяет число видимых опций в раскрывающемся списке. Если значение больше 1, но меньше, чем общее число вариантов в списке, браузер добавит полосу прокрутки, чтобы указать, что есть больше возможностей для просмотра.

Возвращаемое значение

Число, представляющее число видимых вариантов в раскрывающемся списке

Пример

<select id="i" size="2">
  <option>Абрикос</option>
  <option>Апельсин</option>
  <option>Банан</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Попробуй </button> 
<script>
function f() { x = document.getElementById("i");
 x.size = 5;
document.getElementById("demo").innerHTML = x.size; }
</script>