最新のWeb開発のチュートリアル
 

選択オプションコレクション

<オブジェクトを選択します

例

特定のドロップダウンリストにあるどのように多くの選択肢を見つけます：

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

xの結果は次のようになります。

4
»それを自分で試してみてください

もっと"Try it Yourself"以下の例。

定義と使用法

オプションのコレクションは、すべてのコレクションを返します<option>ドロップダウンリスト内の要素を。

Note:彼らはソースコードに表示されるコレクションの要素がソートされています。

ブラウザのサポート

コレクション
options はい はい はい はい はい

構文

selectObject .options

プロパティ

プロパティ 説明
length 数を返します<option>コレクション内の要素を。

注：このプロパティは読み取り専用です
selectedIndex 設定または選択のインデックスを返します<option>コレクション内の要素は、 (starts at 0)

メソッド

方法 説明
[ index ] 戻り値<option>指定されたインデックスを持つコレクションから要素が(starts at 0) 。

注意：インデックス番号が範囲外の場合はnullを返します。
[ add( option [, index ]) ] 追加<option>コレクション内の指定したインデックスの要素が。 インデックスが指定されていない場合は、コレクションの末尾にオプションを挿入します
item( index ) 戻り値<option>指定されたインデックスを持つコレクションから要素が(starts at 0) 。

注意：インデックス番号が範囲外の場合はnullを返します。
namedItem( id ) 戻り値<option>指定されたIDを持つコレクションから要素を。

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

技術的な詳細

DOMバージョン： コアレベル2ドキュメントオブジェクト
戻り値： すべて表すHTMLOptionsCollectionオブジェクト、 <option>の要素<select>要素を。 彼らはソースコードに表示されるコレクションの要素がソートされています
例

その他の例

例

[ インデックス ]

最初のオプションのテキストを取得(index 0)ドロップダウンリストでは：

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

xの結果は次のようになります。

Apple
»それを自分で試してみてください

例

item( index )

最初のオプションのテキストを取得(index 0)ドロップダウンリストでは：

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

xの結果は次のようになります。

Apple
»それを自分で試してみてください

例

namedItem( id )

ドロップダウンリスト内のid =「オレンジ」とオプションのテキストを取得します。

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

xの結果は次のようになります。

Orange
»それを自分で試してみてください

例

追加"Kiwi"のインデックス位置にあるオプション"1"ドロップダウンリストに：

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
»それを自分で試してみてください

例

インデックスにオプションを削除し"1"のドロップダウンリストから：

var x = document.getElementById("mySelect");
x.options.remove(1);
»それを自分で試してみてください

例

ドロップダウンリストのすべてのオプションをループ、および出力の各オプションのテキスト：

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

TXTの結果は次のようになります。

Apple
Orange
Pineapple
Banana
»それを自分で試してみてください

例

ドロップダウンリストのオプションと出力のid =「デモ」を持つ要素で選択されたオプションのテキストを選択します。

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

結果は次のようになります。

Banana
»それを自分で試してみてください

例

別のドロップダウンリストで選択したオプションに応じて、ドロップダウンリストのオプションを変更します。

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);
        }
    }
}
»それを自分で試してみてください
<オブジェクトを選択します