Массив Select options

Объект Select DOM HTML

Определение и использование

options Массив возвращает все элементы списка Элемент <option> набора.

Комментарий:Элементы набора сортируются по порядку их的出现 в исходном коде.

Пример

Пример 1

Просмотреть количество опций в определенном раскрывающемся списке:

var x = document.getElementById("mySelect").options.length;

Попробуйте сами

Результат x будет:

4

Совет:Более сложные примеры предоставлены внизу страницы.

Синтаксис

selectObject.options

Свойство

Свойство Описание
length

Вернуть количество элементов <option> в наборе.

Комментарий:Эта свойство является только для чтения
selectedIndex Установить или вернуть индекс выбранного элемента <option> в наборе (начиная с 0).

Метод

Метод Описание
[index]

Возвратить элемент <option> с указанным индексом (начиная с 0) из набора.

Комментарий:Если номер индекса выходит за пределы диапазона, возвращает null.
[add(option[,index)] Добавить элемент <option> в набор в указанном индексе. Если индекс не указан, элемент вставляется в конец набора.
item(index)

Возвратить элемент <option> с указанным индексом (начиная с 0) из набора.

Комментарий:Если номер индекса выходит за пределы диапазона, возвращает null.
namedItem(id)

Возвратить элемент <option> с указанным ID из набора.

Комментарий:Если id Если элемент не существует,则在озвращает null.
remove(index) Удалить элемент <option> из набора с указанным индексом.

Технические детали

Версия DOM: Core Level 2 Document Object
Возвратное значение:

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

Элементы набора排序ируются по порядку их的出现 в исходном коде.

Более сложные примеры

Пример 2: [index]

Получить текст первого опции из списка в раскрывающемся списке (индекс 0):

var x = document.getElementById("mySelect").options[0].text;

Попробуйте сами

Результат x будет:

Яблоко

Пример 3: item(index)

Получить текст первого опции из списка в раскрывающемся списке (индекс 0):

var x = document.getElementById("mySelect").options.item(0).text;

Попробуйте сами

Результат x будет:

Яблоко

Пример 4: namedItem(id)

Получить текст опции с id="orange" из списка в раскрывающемся списке:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

Попробуйте сами

Результат x будет:

Оранжевый

Пример 5

Добавить опцию «Kiwi» в позиции индекса списка в раскрывающемся списке «1»:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);

Попробуйте сами

Пример 6

Удалите вариант с индексом "1" из списка:

var x = document.getElementById("mySelect"); x.options.remove(1);

Попробуйте сами

Пример 7

Пробегите циклом через все варианты списка и выведите текст каждого варианта:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
  txt = txt + x.options[i].text + "<br>";
}

Попробуйте сами

Результат x будет:

Яблоко
Оранжевый
Апельсин
Банан

Пример 8

Выберите вариант из списка и выведите текст выбранного варианта в элементе с id="demo":

var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

Попробуйте сами

Результат x будет:

Банан

Пример 9

Изменить список вариантов по выбору из другого списка:

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];
function ChangeCarList() {
  var carList = document.getElementById("car");
  var modelList = document.getElementById("carmodel");
  var selCar = carList.options[carList.selectedIndex].value;
  while (modelList.options.length) {
    modelList.remove(0);
  }
  var cars = carsAndModels[selCar];
  if (cars) {
    var i;
    for (i = 0; i < cars.length; i++) {
      var car = new Option(cars[i], i);
      modelList.options.add(car);
    }
  }
}

Попробуйте сами

Поддержка браузеров Коллекция options Да Да Да Да Да

Объект Select DOM HTML