Datalistオプションの集合

HTML DOM Datalist オブジェクト

定義と用法

オプション 集合が返されます。 <datalist> 要素 すべてのオプションの集合。

注記：集合内の要素は、それらがソースコード内に現れる順序にソートされます。

参照もしくは関連情報：

HTML リファレンスマニュアル：HTML <datalist> タグ

HTML リファレンスマニュアル：HTML <option> タグ

例

例 1

指定された<datalist>要素内にいくつかのオプションがあるかを検出します：

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

自分で試してみてください

xの結果は以下の通りです：

5

ヒント：ページの下部にさらに例が提供されています。

文法

datalistObject.options

属性

属性 説明
length

集合内の<option>要素の数を返します。

注記：この属性は読み取り専用です。

メソッド

メソッド 説明
[index]

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

注記：インデックス番号が範囲外の場合はnullを返します。
item(index)

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

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

指定された id の集合から<option>要素を返します。

注記：もし id 存在しない場合はnullを返します。

技術的詳細

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

HTMLCollection オブジェクト、<datalist> 要素内のすべての <option> 要素。

集合内の要素は、それらがソースコード内に現れる順序にソートされます。

ブラウザサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート 10.0 サポート サポート サポート

更多例

例 2：[index]

データリスト内の最初のオプション（インデックス0）の値を取得します：

var x = document.getElementById("browsers").options[0].value;

自分で試してみてください

xの結果は以下の通りです：

Internet Explorer

例 3：item(index)

データリスト内の最初のオプション（インデックス0）の値を取得します：

var x = document.getElementById("browsers").options.item(0).value;

自分で試してみてください

xの結果は以下の通りです：

Internet Explorer

例 4：namedItem(name_or_id)

データリスト内のid="google"のオプションの値を取得します：

var x = document.getElementById("browsers").options.namedItem("google").value;

自分で試してみてください

xの結果は以下の通りです：

Chrome

例 5

データリストのすべてのオプションをループで遍历し、オプションの値を出力します：

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

自分で試してみてください

txtの結果は：

Internet Explorer
Firefox
Chrome
Opera
Safari

HTML DOM Datalist オブジェクト