Select options 集合

HTML DOM Select オブジェクト

定义和用法

オプション 集合返回下拉列表中所有 <option> 元素 のコレクション。

注釈：コレクション内の要素は、ソースコード内で現れる順序で並び替えられます。

インスタンス

例1

特定のドロップダウンリストにどれだけのオプションがあるかを確認します：

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

自分で試してみる

x 的結果は：

4

ヒント：ページ下部にさらに例があります。

構文

selectObject.options

属性

属性 説明
length

コレクション内<option>要素の数を返します。

注釈：この属性は読み取り専用です
selectedIndex 選択された<option>要素のインデックス（0から始まる）を設定または返します。

メソッド

メソッド 説明
[index]

指定されたインデックス（0から始まる）を持つ<option>要素をコレクションから返します。

注釈：インデックス番号が範囲外の場合nullを返します。
[add(option[,index] <option>要素をコレクション内の指定されたインデックスに追加します。インデックスが指定されていない場合、オプションはコレクションの最後に挿入されます。
item(index)

指定されたインデックス（0から始まる）を持つ<option>要素をコレクションから返します。

注釈：インデックス番号が範囲外の場合nullを返します。
namedItem(id)

指定されたIDを持つ<option>要素をコレクションから返します。

注釈：もし id 存在しない場合nullを返します。
remove(index) 指定されたインデックスを持つ<option>要素をコレクションから削除します。

技術的詳細

DOMバージョン： Core Level 2 Document Object
返り値：

HTMLOptionsCollectionオブジェクトは、<select>要素内のすべての<option>要素を表します。

コレクション内の要素は、ソースコード内で現れる順序で並び替えられます。

更多例

例2：[index]

ドロップダウンリストの最初のオプション（インデックス0）のテキストを取得します：

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

自分で試してみる

x 的結果は：

Apple

例3：item(index)

ドロップダウンリストの最初のオプション（インデックス0）のテキストを取得します：

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

自分で試してみる

x 的結果は：

Apple

例4：namedItem(id)

id="orange"のオプションのテキストを取得します：

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

自分で試してみる

x 的結果は：

Orange

例5

ドロップダウンリストのインデックス位置“1”に“Kiwi”オプションを追加します：

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 的結果は：

Apple
Orange
Pineapple
Banana

例子 8

在下拉リストから一つのオプションを選択し、id="demo"の要素に選択されたオプションのテキストを出力します：

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

自分で試してみる

x 的結果は：

Banana

例子 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);
    }
  }
}

自分で試してみる

ブラウザのサポート コレクション オプション はい はい はい はい はい

HTML DOM Select オブジェクト