option | NN 2 IE 3 DOM 1 | |||||||
option オブジェクトは option 要素に対応するオブジェクトです。この要素は、常に select 要素内にネストされている必要があります。option オブジェクトへの参照は、通常は、その親にあたる select オブジェクトを使用します。この場合、option オブジェクトはその select オブジェクトに属するオプションの配列のメンバーとして扱われます。最新のブラウザでは、ID を使用して、直接 option オブジェクトを参照することも可能です。IE 4 以降と Netscape 6 では、{章冒頭の共通のプロパティの説明にある disabled プロパティを使用できます。 |
||||||||
Netscape 3 および Explorer 4 以降のブラウザでは、下位互換性があり最新のブラウザでも機能するコードを使用して、select オブジェクト内のオプションのセットを変更できます。変更するときに既存のオプションを長さが等しい別のリストに置き換える場合には、select オブジェクトの options 配列で text、value、selected の各プロパティに新しい値を設定するだけです。ただし、リストのオプション数が異なる場合には、既存の option オブジェクトをすべて削除してから、新しいオブジェクトを挿入する方が便利です。新しい Option オブジェクトのコンストラクタ関数では、複数のオブジェクトを同時に作成して、それぞれに options 配列内での位置を割り当てることができます。構文には次のコンストラクタを使用します。 |
||||||||
var newOpt = new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag); |
||||||||
次の関数は、select オブジェクトのオプションのリストを書き換える場合の一般的な手順です。 |
||||||||
function setSelect(selectElemObj) { // remove existing options selectElemObj.options.length = 0; // create and assign options, one by one selectElemObj.options[0] = new Option("Hercule Poirot", "poirot", false, false); selectElemObj.options[1] = new Option("Miss Marple", "marple", false, false); ... } |
||||||||
ほとんどの場合、コンストラクタのパラメータは実環境ではオブジェクトの配列としてページに送信されます。これにより、for ループ内部で新たなオプションの割り当てが可能になっています。その他のアプローチについては、options.add( ) メソッド (IE のみ)、および select.add( ) メソッド (IE 5 以降および Netscape 6 のみ) を参照してください。 |
||||||||
相当する HTML コード | ||||||||
<option> |
||||||||
オブジェクト参照 | ||||||||
[window.]document.formName.selectName.options[i] [window.]document.forms[i].elements[i].options[i] [window.]document.getElementById("elementID") |
||||||||
オブジェクト固有のプロパティ | ||||||||
|
||||||||
オブジェクト固有のメソッド | ||||||||
なし |
||||||||
オブジェクト固有のイベントハンドラープロパティ | ||||||||
なし |
||||||||
defaultSelected | NN 2 IE 3 DOM 1 |
読み書き | |
要素の selected 属性がタグ内に設定されているかどうかを示します。現在の selected プロパティと defaultSelected を比較して、ドキュメントが読み込まれた後でコントロールのステートが変更したかどうかを調べることができます。このプロパティを変更しても、現在の selected ステータスには影響がありません。 |
|
例 | |
var listItem = document.forms[0].selector.options[2]; if (listItem.selected != listItem.defaultSelected) { // process for changed state } |
|
値 | |
true または false のブール値 |
|
既定値 | |
HTML タグの属性によって異なります。 |
|
form | NN 6 IE 4 DOM 1 |
読み取り専用 | |
select 要素とそのオプションが入っている form オブジェクトへの参照を返します。 |
|
例 | |
var theForm = document.getElementById("myOption3").form; |
|
値 | |
form オブジェクトへの参照 |
|
既定値 | |
なし |
|
index | NN 6 IE 3 DOM 1 |
読み取り専用 | |
select 要素のオプションにある現在の option オブジェクトを示す、0 で始まる整数インデックス値を返します。select オブジェクトの selectedIndex プロパティは、現在選択されているオプションのインデックス値を返します。 |
|
例 | |
var whichItem = document.getElementById("myOption3").index; |
|
値 | |
整数 |
|
既定値 | |
なし |
|
label | NN 6 IE 5(Mac)/6(Win) DOM 1 |
読み書き | |
option 要素の label 属性に対応するプロパティです。階層メニューで使用するためのプロパティですが、Macintosh 版 IE 5 以外のブラウザでは機能しません。Macintosh 版 IE 5 が返す値は、text プロパティの場合と同じです。 |
|
値 | |
文字列 |
|
既定値 | |
なし |
|
selected | NN 2 IE 3 DOM 1 |
読み書き | |
リストのオプションがユーザーによって選択されているかどうか、つまりその値がサーバーに送信されているかどうかを示します。アイテムをアルゴリズム的に選択するようにスクリプトで値を変更できます。どのオプションが選択されているかを調べるには、selected プロパティが true のオプションを検索するよりも、select オブジェクトの selectedIndex プロパティを使用する方が効率がよくなります。select 要素が複数選択を許可するように設定されている場合は、例外となります。この場合には、選択されたアイテムを見つけるために全体を調べる必要があります。 |
|
例 | |
document.forms[0].selectList.options[3].selected = true; |
|
値 | |
true または false のブール値 |
|
既定値 | |
false |
|
text | NN 2 IE 3 DOM 1 |
読み書き | |
option 要素に関連付けられているテキストを示します。このテキストは開始タグと終了タグの間に位置しており、画面上では select 要素に表示されます。リストアイテムに関連付けられている非表示値は、value プロパティを介して、保存、取得、変更できます。 |
|
例 | |
var list = document.forms[0].selectList; var listItemText = list.options[list.selectedIndex].text; |
|
値 | |
文字列 |
|
既定値 | |
なし |
|
value | NN 4 IE 4 DOM 1 |
読み書き | |
option 要素に関連付けられている値を示します。option 要素に value 属性または value プロパティが設定されている場合、この値は value プロパティの戻り値になります。それ以外の場合には、空の文字列が返されます。 |
|
例 | |
var itemValue = document.forms[0].selectList.options[2]value; |
|
値 | |
文字列 |
|
既定値 | |
なし |
|