Option

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

Свойства объекта Option

defaultSelected Возвращает значение по умолчанию атрибута selected.
disabled Устанавливает или возвращает значение атрибута disabled данного элемента.
form Позволяет обратится к форме частью которой является данный элемент.
index Возвращает номер позиции данного элемента в выпадающем списке.
label Устанавливает или возвращает значение атрибута label данного элемента.
selected Возвращает или устанавливает значение атрибута selected данного элемента.
text Устанавливает или возвращает текст данного элемента.
value Возвращает или устанавливает значение атрибута value данного элемента.

defaultSelected

Свойство defaultSelected возвращает значение по умолчанию атрибута selected.

Синтаксис

optionObject.defaultSelected

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

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

Пример

<select id="i">
  <option>Абрикос</option>
  <option>Апельсин</option>
  <option>Банан</option>
  <option selected>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Узнать defaultSelected </button> 
<p id="demo"></p>
<script>
function f() 
{ var i = document.getElementById("i").selectedIndex;
  var y = document.getElementsByTagName("option");
  var t =  y[i].text + " - defaultSelected=" + y[i].defaultSelected;
  document.getElementById("demo").innerHTML = t; }
</script>

disabled

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

Синтаксис

optionObject.disabled [ = true|false ]

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

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

Пример

<select id="i" size="4">
  <option>Абрикос</option>
  <option>Апельсин</option>
  <option>Банан</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select><br>
<button onclick="f(true)"> ЗаБлокировать Банан </button>
<button onclick="f(false)"> РазБлокировать Банан </button>
<script>
function f(n) 
  { document.getElementById("i").options[2].disabled = n; }
</script>

form

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

Синтаксис

optionObject.form

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

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

index

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

Синтаксис

optionObject.index = number

number - определяет индекс позиции элемента в раскрывающемся списке.

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

Число, представляющее позицию индекса элемента в раскрывающемся списке. Индекс начинается с 0.

Пример

<select id="i">
  <option>Абрикос</option>
  <option>Апельсин</option>
  <option>Банан</option>
  <option>Груша</option>
  <option>Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Отобразить текст и индекс всех элементов </button> 
<p id="demo"></p>
<script>
function f() { t = '';
  x = document.getElementById("i").options;
  for (var i=0; i< x.length; i++) 
    {t += '<br>' + x[i].text + ' имеет index  ' + x[i].index;}
document.getElementById("demo").innerHTML = t; }
</script>

label

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

Синтаксис

optionObject.label [ = str_label ]

str_label - определяет сокращенный вариант для элемента.

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

Строка, представляющая метку элемента в раскрывающемся списке. Если атрибут label не указан - текст элемента <option>.

Пример

<p>Узнай <b>Text</b> по <b>label</b> выбранного элемента</p>
<select id="i" size="4" onchange="f()">
  <option label="Volvo">Volvo (Latin for "I roll")</option>
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  <option label="Mercedes" selected>Mercedes (Mercedes-Benz)</option>
  <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>
<p id="demo"></p>
<script>
function f()
 { var x = document.getElementById("i").selectedIndex;
   var y = document.getElementsByTagName("option")[x];
   document.getElementById("demo").innerHTML = 
      y.label + ': ' + y.text; }
f();
</script>

selected

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

Синтаксис

optionObject.selected [ = true|false ]

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

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

Пример

<select id="i" size="3">
  <option>Абрикос</option>
  <option selected>Апельсин</option>
  <option>Банан</option>
  <option>Груша</option>
  <option id="sl">Слива</option>
  <option>Яблоко</option>
</select>
<button onclick="f()"> Выбрать Сливу</button> 
<script>
function f()
 { var x = document.getElementById("sl").selected = true; }
</script>

text

Свойство text устанавливает или возвращает текст данного элемента.

Синтаксис

optionObject.text [ = str_text ]

str_text - определяет текст элемента.

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

Строка, представляющая текст элемента <option>текст</option>

Комментарии

При отправке данных на сервер, если не задано свойство value для элемента, будет отправлено содержание текста.

value

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

Синтаксис

optionObject.value [ = str_value ]

str_value - значение, которое будет отправлено на сервер.

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

Строка, представляющая значение атрибута value элемента

Пример

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

Справочник JavaScript