セレクト要素について（HTMLSelectElement）

・	セレクト要素について
・	セレクト要素を作成する
・	セレクト要素を設定する
・	アイテムを登録する
・	アイテムを取得する
・	アイテムを選択する

前のページに戻る

セレクト要素について

■ <SELECT> 要素について

セレクト要素は、コントロール要素の一種です。

コンボボックスや、リストボックスを設置できます。

■コンボボックスの設置例

<SELECT> タグを使用して、コンボボックスを表示する


<form>

  <select size="1" name="my_select" >

    <option value="aaa" >アイテム０</option>
    <option value="bbb" >アイテム１</option>
    <option value="ccc" >アイテム２</option>

  </select>

</form>

サンプル表示

■リストボックスの設置例

<SELECT> タグを使用して、リストボックスを表示する


<form>

  <select size="5" name="my_select" >

    <option value="aaa" >アイテム０</option>
    <option value="bbb" >アイテム１</option>
    <option value="ccc" >アイテム２</option>

  </select>

</form>

サンプル表示

■ <OPTION> 要素について

リスト内のアイテム１つ分に相当します。

■ <OPTGROUP> 要素について

複数のアイテムを、グループ化する事ができます。

<OPTGROUP> タグを使用して、アイテムをグループ化する


<form>

  <select size="10" name="my_select" >

    <optgroup label="グループ１" >
      <option value="aaa" >アイテム０</option>
      <option value="bbb" >アイテム１</option>
      <option value="ccc" >アイテム２</option>
    </optgroup>

    <optgroup label="グループ２" >
      <option value="ddd" >アイテム３</option>
      <option value="eee" >アイテム４</option>
    </optgroup>

    <option value="fff" >アイテム５</option>
    <option value="ggg" >アイテム６</option>

  </select>

</form>

サンプル表示

上に戻る

セレクト要素を作成する

■セレクト要素を動的に作成する

■ HTMLSelectElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"select" を指定します。

動的に HTMLSelectElement オブジェクトを作成する


// HTMLSelectElement オブジェクトを作成する
var element = document.createElement("select");

// 出力テスト
console.log(element);

■外観の種類を設定する

size プロパティを使用します。

コンボボックスや、リストボックスに変化します。

■アイテムの複数選択に対応する

multiple プロパティを使用します。

■セレクト要素をブラウザに表示する

HTMLSelectElement オブジェクトを、任意のノードリストに登録します。

セレクト要素を動的に作成して、ブラウザに表示する


// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

■静的な <SELECT> タグから、HTMLSelectElement オブジェクトを取得する

要素を取得する方法については、こちらで解説しています。

静的な <SELECT> タグから、HTMLSelectElement オブジェクトを取得する


<html>
  <body>

    <form>

      <select id="aaa" >
        <option>アイテム０</option>
        <option>アイテム１</option>
        <option>アイテム２</option>
      </select>

    </form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var select = document.getElementById("aaa");

	// 出力テスト
	console.log(select);

    //-->
    </script>

  </body>
</html>

上に戻る

セレクト要素を設定する

■セレクト要素を無効状態に設定する

■セレクト要素の高さを設定する（アイテム数指定）

■複数選択の有無を設定する

■セレクト要素を設定する

■プロパティ一覧（一部抜粋）

プロパティ名	型	説明
disabled	Boolean	セレクト要素を無効状態に設定する
size	Number	セレクト要素の高さを設定する（アイテム数指定）
multiple	Boolean	複数選択の有無を設定する

プロパティ名	型	説明
name	String	名前を設定する
value	String	値を設定する（１つのアイテム選択）
autofocus	Boolean	初期フォーカスの有無を設定する（DOM構築が完了した瞬間）
required	Boolean	入力必須の有無を設定する
willValidate	Boolean	バリデートの有無を設定する
validationMessage	String	バリデートのエラーメッセージを設定する

■セレクト要素を無効状態に設定する

disabled プロパティを使用します。

true をセットすると、無効状態となります。

■無効状態について

セレクト要素を選択する事はできません。

■使用例

セレクト要素を無効状態に設定する


// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
// ------------------------------------------------------------
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム０")) );
select.add( (new Option("アイテム１")) );
select.add( (new Option("アイテム２")) );

// ------------------------------------------------------------
// セレクト要素を無効状態に設定する
// ------------------------------------------------------------
select.disabled = true;

■セレクト要素の高さを設定する（アイテム数指定）

size プロパティを使用します。

高さだけでなく、外観も変化します。

1 を指定すると、コンボボックスに変化します。

2 以上を指定すると、リストボックスに変化します。

デフォルトは、1 です。

■使用例

コンボボックスを設置する


// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
// ------------------------------------------------------------
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム０")) );
select.add( (new Option("アイテム１")) );
select.add( (new Option("アイテム２")) );

// ------------------------------------------------------------
// セレクト要素の高さを設定する（アイテム数指定）
// ------------------------------------------------------------
select.size = 1;

リストボックスを設置する


// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
// ------------------------------------------------------------
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム０")) );
select.add( (new Option("アイテム１")) );
select.add( (new Option("アイテム２")) );

// ------------------------------------------------------------
// セレクト要素の高さを設定する（アイテム数指定）
// ------------------------------------------------------------
select.size = 5;

■複数選択の有無を設定する

multiple プロパティを使用します。

■アイテムの複数選択に対応する

外観をリストボックスに変更します。

size プロパティに、2 以上の値を指定します。

multiple プロパティに、true を指定します。

■使用例

複数選択の有無を設定する


// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
// ------------------------------------------------------------
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム０")) );
select.add( (new Option("アイテム１")) );
select.add( (new Option("アイテム２")) );
select.add( (new Option("アイテム３")) );
select.add( (new Option("アイテム４")) );

// ------------------------------------------------------------
// セレクト要素の高さを設定する（アイテム数指定）
// ------------------------------------------------------------
select.size = 5;

// ------------------------------------------------------------
// 複数選択の有無を設定する
// ------------------------------------------------------------
select.multiple = true;

上に戻る

アイテムを登録する

■アイテムを作成する（OPTION 要素）

■グループを作成する（OPTGROUP 要素）

■アイテムをリストに登録する（DOM API）

■アイテムをリストに登録する（位置指定）

■アイテムをリストから除外する（DOM API）

■アイテムをリストから除外する（位置指定）

■ Internet Explorer 8 以前の注意点

以下の機能は、DOM API と混在させる事はできません。

内部処理の都合により、互換性がありません。

Option() コンストラクタの第01引数

text プロパティ

add() メソッド

remove() メソッド

これらの機能のみを使って、実装する必要があります。

もしくは一切使わず、DOM API だけで実装する必要があります。

■ OPTION 要素を作成する（Option コンストラクタ）

■ Option コンストラクタを使用する

new 演算子を使って、Option() コンストラクタをインスタンス化します。

第01引数は、text プロパティに相当します。

new Option( "text" , "value" , defaultSelected , selected ) :HTMLOptionElement

第01引数(略可)	String	(text プロパティと同等) ラベルを指定。
第02引数(略可)	String	(value プロパティと同等) 値情報を指定。
第03引数(略可)	Boolean	(defaultSelected プロパティと同等) FORMリセット時の選択状態を設定する
第04引数(略可)	Boolean	(selected プロパティと同等) 選択状態を設定する
戻り値	HTMLOptionElement	新しい HTMLOptionElement オブジェクトが得られる。

■作成例

動的に HTMLOptionElement オブジェクトを作成する


// ------------------------------------------------------------
// HTMLOptionElement オブジェクトを作成する
// ------------------------------------------------------------
var option = new Option("私はアイテムです" , "値");

// 出力テスト
console.log(option);

■ OPTION 要素を作成する（createElement メソッド）

■ HTMLOptionElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"option" を指定します。

■ラベルを設定する

text プロパティを使用します。

textContent プロパティを使用する方法もあります。

■値を設定する

value プロパティを使用します。

■作成例

動的に HTMLOptionElement オブジェクトを作成する


// ------------------------------------------------------------
// HTMLOptionElement オブジェクトを作成する
// ------------------------------------------------------------
var option = document.createElement("option");

// ラベルを設定する
option.text = "私はアイテムです";

// 値情報を設定する
option.value = "値";

// 出力テスト
console.log(option);

■ OPTION 要素のラベルを設定する

■アイテムのラベルを設定する

text プロパティを使用します。

■ text プロパティの代替関数

Internet Explorer 6 でも動作する代替関数です。

DOM API を使用します。

text プロパティの代替関数


// ------------------------------------------------------------
// アイテムのラベルを設定する関数
// ------------------------------------------------------------
function OptionElement_SetText(option,text){
	if(option.textContent !== undefined) option.textContent = text;
	if(option.innerText !== undefined) option.innerText = text;
}

// ------------------------------------------------------------
// アイテムのラベルを取得する関数
// ------------------------------------------------------------
function OptionElement_GetText(option){
	return (option.text || option.innerText || "");
}

■グループを作成する（OPTGROUP 要素）

■ HTMLOptGroupElement オブジェクトを作成する

document.createElement() メソッドを使用します。

引数に、"optgroup" を指定します。

■ラベルを設定する

label プロパティを使用します。

■作成例

動的に HTMLOptGroupElement オブジェクトを作成する


// ------------------------------------------------------------
// HTMLOptGroupElement オブジェクトを作成する
// ------------------------------------------------------------
var optgroup = document.createElement("optgroup");

// ラベルを設定する
optgroup.label = "私はグループです";

// 出力テスト
console.log(optgroup);

■アイテムをリストに登録する（DOM API）

■ DOM API を使ったノードリストの編集について

こちらで解説しています。

<OPTGROUP> 要素を含む、２世代のノードツリー構築も可能です。

■使用例（１世代のみ）

DOM API を使って、アイテムをリストに登録する（１世代）


// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
function Document_Create_OptionElement(document,text,value,defaultSelected,selected){
	var option = document.createElement("option");
	if(text !== undefined){
		if(option.textContent !== undefined) option.textContent = text;
		if(option.innerText !== undefined) option.innerText = text;
	}
	if(value !== undefined) option.value = value;
	if(defaultSelected !== undefined) option.defaultSelected = defaultSelected;
	if(selected !== undefined) option.selected = selected;
	return option;
}

// ------------------------------------------------------------
// アイテムのラベルを設定する関数
// ------------------------------------------------------------
function OptionElement_SetText(option,text){
	if(option.textContent !== undefined) option.textContent = text;
	if(option.innerText !== undefined) option.innerText = text;
}


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 5;

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// アイテム０を用意する
// ------------------------------------------------------------
var option0 = Document_Create_OptionElement(document);

// ラベルを設定する
OptionElement_SetText(option0 , "アイテム０");

// セレクト要素のノードリストに登録する（最後尾）
select.appendChild(option0);

// ------------------------------------------------------------
// アイテム１を用意する
// ------------------------------------------------------------
var option1 = Document_Create_OptionElement(document);

// ラベルを設定する
OptionElement_SetText(option1 , "アイテム１");

// セレクト要素のノードリストに登録する（最後尾）
select.appendChild(option1);

■使用例（ OPTGROUP 要素を含めた２世代）

DOM API を使って、アイテムをリストに登録する（２世代）


// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
function Document_Create_OptionElement(document,text,value,defaultSelected,selected){
	var option = document.createElement("option");
	if(text !== undefined){
		if(option.textContent !== undefined) option.textContent = text;
		if(option.innerText !== undefined) option.innerText = text;
	}
	if(value !== undefined) option.value = value;
	if(defaultSelected !== undefined) option.defaultSelected = defaultSelected;
	if(selected !== undefined) option.selected = selected;
	return option;
}

// ------------------------------------------------------------
// アイテムのラベルを設定する関数
// ------------------------------------------------------------
function OptionElement_SetText(option,text){
	if(option.textContent !== undefined) option.textContent = text;
	if(option.innerText !== undefined) option.innerText = text;
}


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 8;

// BODY のノードリストに登録する
document.body.appendChild(select);

	// ------------------------------------------------------------
	// グループ０を用意する
	// ------------------------------------------------------------
	var optgroup0 = document.createElement("optgroup");

	// ラベルを設定する
	optgroup0.label = "グループ０";

	// セレクト要素のノードリストに登録する（最後尾）
	select.appendChild(optgroup0);

		// ------------------------------------------------------------
		// アイテム０を用意する
		// ------------------------------------------------------------
		var option0 = Document_Create_OptionElement(document);

		// ラベルを設定する
		OptionElement_SetText(option0 , "アイテム０");

		// グループ０のノードリストに登録する（最後尾）
		optgroup0.appendChild(option0);

		// ------------------------------------------------------------
		// アイテム１を用意する
		// ------------------------------------------------------------
		var option1 = Document_Create_OptionElement(document);

		// ラベルを設定する
		OptionElement_SetText(option1 , "アイテム１");

		// グループ０のノードリストに登録する（最後尾）
		optgroup0.appendChild(option1);

	// ------------------------------------------------------------
	// グループ１を用意する
	// ------------------------------------------------------------
	var optgroup1 = document.createElement("optgroup");

	// ラベルを設定する
	optgroup1.label = "グループ１";

	// セレクト要素のノードリストに登録する（最後尾）
	select.appendChild(optgroup1);

		// ------------------------------------------------------------
		// アイテム２を用意する
		// ------------------------------------------------------------
		var option2 = Document_Create_OptionElement(document);

		// ラベルを設定する
		OptionElement_SetText(option2 , "アイテム２");

		// グループ１のノードリストに登録する（最後尾）
		optgroup1.appendChild(option2);

		// ------------------------------------------------------------
		// アイテム３を用意する
		// ------------------------------------------------------------
		var option3 = Document_Create_OptionElement(document);

		// ラベルを設定する
		OptionElement_SetText(option3 , "アイテム３");

		// グループ１のノードリストに登録する（最後尾）
		optgroup1.appendChild(option3);

■アイテムをリストに登録する（位置指定）

■アイテムをリストに登録する

add() メソッドを使用します。

より高度に制御するには、DOM API を使用します。

HTMLSelectElement.add( item , before ) :Void

第01引数	Element	登録したい要素（アイテム）を指定
第02引数(略可)	Element Number	要素を指定した場合、その直前に登録（存在しないなら最後尾）数値を指定した場合、その位置に登録（存在しないなら最後尾）
戻り値	Void	なし。

■ add() メソッドの位置指定について

一部のブラウザは、位置指定に対応していません。

一部のブラウザは、<OPTGROUP> 要素が含まれると、異なる動作をします。

■ add() メソッドの代替関数

Internet Explorer 6 でも動作する代替関数です。

DOM API を使用します。要素や位置を指定できます。

アイテムをリストに登録する関数


// ------------------------------------------------------------
// アイテムをリストに登録する関数
// ------------------------------------------------------------
function SelectElement_AddItem(select,item,before){
	if(typeof(before) == "number") before = select.options[before];
	var parent;
	if(before){
		parent = before.parentNode;
	}else{
		parent = select;
		before = null;
	}
	parent.insertBefore(item , before);
}

■使用例

アイテムをリストに登録する（最後尾に登録）


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 5;

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// アイテム０を用意する
// ------------------------------------------------------------
var option0 = new Option("アイテム０" , "値Ａ");

// アイテムをリストに登録する（最後尾）
select.add(option0);

// ------------------------------------------------------------
// アイテム１を用意する
// ------------------------------------------------------------
var option1 = new Option("アイテム１" , "値Ｂ");

// アイテムをリストに登録する（最後尾）
select.add(option1);

アイテムをリストに登録する（位置指定）


// ------------------------------------------------------------
// アイテムをリストに登録する関数
// ------------------------------------------------------------
function SelectElement_AddItem(select,item,before){
	if(typeof(before) == "number") before = select.options[before];
	var parent;
	if(before){
		parent = before.parentNode;
	}else{
		parent = select;
		before = null;
	}
	parent.insertBefore(item , before);
}

// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
function Document_Create_OptionElement(document,text,value,defaultSelected,selected){
	var option = document.createElement("option");
	if(text !== undefined){
		if(option.textContent !== undefined) option.textContent = text;
		if(option.innerText !== undefined) option.innerText = text;
	}
	if(value !== undefined) option.value = value;
	if(defaultSelected !== undefined) option.defaultSelected = defaultSelected;
	if(selected !== undefined) option.selected = selected;
	return option;
}


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 5;

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// アイテム０を用意する
// ------------------------------------------------------------
var option0 = Document_Create_OptionElement(document , "アイテム０" , "値Ａ");

// アイテムをリストの 0 番目に登録する
SelectElement_AddItem(select , option0 , 0);

// ------------------------------------------------------------
// アイテム１を用意する
// ------------------------------------------------------------
var option1 = Document_Create_OptionElement(document , "アイテム１" , "値Ｂ");

// アイテムをリストの 1 番目に登録する
SelectElement_AddItem(select , option1 , 1);

■アイテムをリストから除外する（DOM API）

■要素をノードリストから除外する

こちらで解説しています。

アイテムは、自殺的に除外できます。

■使用例

任意のアイテムを除外する


// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
function Document_Create_OptionElement(document,text,value,defaultSelected,selected){
	var option = document.createElement("option");
	if(text !== undefined){
		if(option.textContent !== undefined) option.textContent = text;
		if(option.innerText !== undefined) option.innerText = text;
	}
	if(value !== undefined) option.value = value;
	if(defaultSelected !== undefined) option.defaultSelected = defaultSelected;
	if(selected !== undefined) option.selected = selected;
	return option;
}

// ------------------------------------------------------------
// アイテムを除外する関数
// ------------------------------------------------------------
function OptionElement_Remove(option){
	var parent = option.parentNode;
	if(!parent) return false;
	var node =  parent.removeChild(option);
	return (node == option);
}


// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
// ------------------------------------------------------------
var select = document.createElement("select");

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.appendChild( Document_Create_OptionElement(document , "アイテム０" , "値Ａ") );
select.appendChild( Document_Create_OptionElement(document , "アイテム１" , "値Ｂ") );
select.appendChild( Document_Create_OptionElement(document , "アイテム２" , "値Ｃ") );
select.appendChild( Document_Create_OptionElement(document , "アイテム３" , "値Ｄ") );
select.appendChild( Document_Create_OptionElement(document , "アイテム４" , "値Ｅ") );

// ------------------------------------------------------------
// セレクト要素の高さを設定する（アイテム数指定）
// ------------------------------------------------------------
select.size = 5;

// ------------------------------------------------------------
// アイテムリストを取得する
// ------------------------------------------------------------
var option_list = select.options;

// ------------------------------------------------------------
// 3 番目のアイテムを取得する
// ------------------------------------------------------------
var option = option_list[3];

// ノードリストから除外する
OptionElement_Remove(option);

// ------------------------------------------------------------
// 1 番目のアイテムを取得する
// ------------------------------------------------------------
var option = option_list[1];

// ノードリストから除外する
OptionElement_Remove(option);

■アイテムをリストから除外する（位置指定）

■アイテムをリストから除外する

remove() メソッドを使用します。

HTMLSelectElement.remove( index ) :Void

第01引数	Number	指定した位置のアイテムを除外する（存在しないなら無効）第01引数を省略した場合、セレクト要素自体を除外する
戻り値	Void	なし。

■ remove() メソッドの代替関数

Internet Explorer 6 でも動作する代替関数です。

DOM API を使用します。要素や位置を指定できます。

アイテムをリストから除外する関数


// ------------------------------------------------------------
// アイテムをリストから除外する関数
// ------------------------------------------------------------
function SelectElement_RemoveItem(select,item){
	if(!(item)) item = 0;
	if(typeof(item) == "number") item = select.options[item];
	if(!(item)) return;
	if(!(item.parentNode)) return;
	item.parentNode.removeChild(item);
}

■使用例

位置を指定してアイテムを除外する


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 5;

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// アイテム０を用意する
// ------------------------------------------------------------
var option0 = new Option("アイテム０" , "値Ａ");

// アイテムをリストに登録する（最後尾）
select.add(option0);

// ------------------------------------------------------------
// アイテム１を用意する
// ------------------------------------------------------------
var option1 = new Option("アイテム１" , "値Ｂ");

// アイテムをリストに登録する（最後尾）
select.add(option1);

// ------------------------------------------------------------
// アイテム２を用意する
// ------------------------------------------------------------
var option2 = new Option("アイテム２" , "値Ｃ");

// アイテムをリストに登録する（最後尾）
select.add(option2);

// ------------------------------------------------------------
// 1 番目のアイテムを除外する
// ------------------------------------------------------------
select.remove(1);

DOM API を使って、アイテムを除外する


// ------------------------------------------------------------
// アイテムをリストに登録する関数
// ------------------------------------------------------------
function SelectElement_AddItem(select,item,before){
	if(typeof(before) == "number") before = select.options[before];
	var parent;
	if(before){
		parent = before.parentNode;
	}else{
		parent = select;
		before = null;
	}
	parent.insertBefore(item , before);
}

// ------------------------------------------------------------
// アイテムをリストから除外する関数
// ------------------------------------------------------------
function SelectElement_RemoveItem(select,item){
	if(!(item)) item = 0;
	if(typeof(item) == "number") item = select.options[item];
	if(!(item)) return;
	if(!(item.parentNode)) return;
	item.parentNode.removeChild(item);
}

// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
function Document_Create_OptionElement(document,text,value,defaultSelected,selected){
	var option = document.createElement("option");
	if(text !== undefined){
		if(option.textContent !== undefined) option.textContent = text;
		if(option.innerText !== undefined) option.innerText = text;
	}
	if(value !== undefined) option.value = value;
	if(defaultSelected !== undefined) option.defaultSelected = defaultSelected;
	if(selected !== undefined) option.selected = selected;
	return option;
}


// ------------------------------------------------------------
// リストボックスを用意する
// ------------------------------------------------------------
// HTMLSelectElement オブジェクトを作成する
var select = document.createElement("select");

// 高さを設定する（アイテム数指定）
select.size = 5;

// BODY のノードリストに登録する
document.body.appendChild(select);

// ------------------------------------------------------------
// アイテム０を用意する
// ------------------------------------------------------------
var option0 = Document_Create_OptionElement(document , "アイテム０" , "値Ａ");

// アイテムをリストの 0 番目に登録する
SelectElement_AddItem(select , option0 , 0);

// ------------------------------------------------------------
// アイテム１を用意する
// ------------------------------------------------------------
var option1 = Document_Create_OptionElement(document , "アイテム１" , "値Ｂ");

// アイテムをリストの 1 番目に登録する
SelectElement_AddItem(select , option1 , 1);

// ------------------------------------------------------------
// アイテム２を用意する
// ------------------------------------------------------------
var option2 = Document_Create_OptionElement(document , "アイテム２" , "値Ｃ");

// アイテムをリストの 2 番目に登録する
SelectElement_AddItem(select , option2 , 2);

// ------------------------------------------------------------
// 1 番目のアイテムを除外する
// ------------------------------------------------------------
SelectElement_RemoveItem(select , 1);

// ------------------------------------------------------------
// アイテム２を除外する
// ------------------------------------------------------------
SelectElement_RemoveItem(select , option2);

上に戻る

アイテムを取得する

■１つのアイテムを取得する（位置指定）

■１つのアイテムを取得する（名前指定）

■すべてのアイテムを取得する

■１つのアイテムを取得する（位置指定）

■アイテムリストから取得する

options プロパティを使用します。

配列アクセス演算子を使って、任意の番地にアクセスします。

■任意の位置のアイテムを取得する

item() メソッドを使用します。

HTMLSelectElement.item( index ) :HTMLOptionElement

第01引数(略可)	Number	取得したいアイテムの位置を指定
戻り値	HTMLOptionElement	HTMLOptionElement オブジェクトが得られる。存在しない場合 null

■取得例

１つのアイテムを取得する（位置指定）


<html>
  <body>

  <select size="1" id="aaa" >

    <option>アイテム０</option>
    <option>アイテム１</option>
    <option>アイテム２</option>
    <option>アイテム３</option>
    <option>アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムのリストを取得する
	// ------------------------------------------------------------
	var option_list = select.options;

	// ------------------------------------------------------------
	// 1 番目のアイテムを取得する
	// ------------------------------------------------------------
	var option = option_list[1];
	// 出力テスト
	console.log(option);

	// ------------------------------------------------------------
	// 3 番目のアイテムを取得する
	// ------------------------------------------------------------
	var option = option_list[3];
	// 出力テスト
	console.log(option);

	// ------------------------------------------------------------
	// 2 番目のアイテムを取得する（セレクト要素から直接取得）
	// ------------------------------------------------------------
	var option = select[2];
	// 出力テスト
	console.log(option);

	// ------------------------------------------------------------
	// 4 番目のアイテムを取得する（セレクト要素から直接取得）
	// ------------------------------------------------------------
	var option = select[4];
	// 出力テスト
	console.log(option);

	// ------------------------------------------------------------
	// 0 番目のアイテムを取得する（メソッドから取得）
	// ------------------------------------------------------------
	var option = select.item(0);
	// 出力テスト
	console.log(option);

    //-->
    </script>

  </body>
</html>

■１つのアイテムを取得する（名前指定）

■任意の名前のアイテムを取得する

namedItem() メソッドを使用します。

HTMLSelectElement.namedItem( name ) :HTMLOptionElement

第01引数(略可)	String	取得したいアイテムの名前を指定
戻り値	HTMLOptionElement	HTMLOptionElement オブジェクトが得られる。存在しない場合 null

■取得例

１つのアイテムを取得する（名前指定）


<html>
  <body>

  <select size="1" id="aaa" >

    <option name="item0" >アイテム０</option>
    <option name="item1" >アイテム１</option>
    <option name="item2" >アイテム２</option>
    <option name="item3" >アイテム３</option>
    <option name="item4" >アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// １つのアイテムを取得する（名前指定）
	// ------------------------------------------------------------
	var option = select.namedItem("item1");

	// 出力テスト
	console.log(option);

    //-->
    </script>

  </body>
</html>

■登録されているアイテムをすべて取得する

■アイテムのリストを取得する

options プロパティを使用します。

HTMLOptionsCollection オブジェクトが得られます。

■ HTMLOptionsCollection オブジェクトについて

配列のように中身を取り出せます。

中には、HTMLOptionElement オブジェクトが格納されています。

■アイテムの総数を取得する

length プロパティを使用します。

■セレクト要素から直接取得する

セレクト要素は、配列アクセス演算子に対応しています。

配列のように中身を取り出せます。

中には、HTMLOptionElement オブジェクトが格納されています。

■取得例

登録されているアイテムをすべて取得する（options プロパティ）


<html>
  <body>

  <select size="1" id="aaa" >

    <option>アイテム０</option>
    <option>アイテム１</option>
    <option>アイテム２</option>
    <option>アイテム３</option>
    <option>アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムのリストを取得する
	// ------------------------------------------------------------
	var option_list = select.options;

	// ------------------------------------------------------------
	// アイテムの総数を取得する
	// ------------------------------------------------------------
	var num = option_list.length;

	// ------------------------------------------------------------
	// 順番に取得する
	// ------------------------------------------------------------
	var i;
	for(i=0;i < num;i++){

		// アイテムを取得
		var option = option_list[i];

		// 出力テスト
		console.log(option);
	}

    //-->
    </script>

  </body>
</html>

登録されているアイテムをすべて取得する（セレクト要素から直接取得）


<html>
  <body>

  <select size="1" id="aaa" >

    <option>アイテム０</option>
    <option>アイテム１</option>
    <option>アイテム２</option>
    <option>アイテム３</option>
    <option>アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムの総数を取得する
	// ------------------------------------------------------------
	var num = select.length;

	// ------------------------------------------------------------
	// 順番に取得する
	// ------------------------------------------------------------
	var i;
	for(i=0;i < num;i++){

		// アイテムを取得
		var option = select[i];

		// 出力テスト
		console.log(option);
	}

    //-->
    </script>

  </body>
</html>

上に戻る

アイテムを選択する

■１つのアイテムを選択する（位置指定）

selectedIndex プロパティを使用します。

0 から始まる位置を指定します。

-1 などの、実在しない位置を指定すると、未選択状態に変化します。

１つのアイテムを選択する（位置指定）


<html>
  <body>

  <select size="1" id="aaa" >

    <option>アイテム０</option>
    <option>アイテム１</option>
    <option>アイテム２</option>
    <option>アイテム３</option>
    <option>アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// １つのアイテムを選択する（位置指定）
	// ------------------------------------------------------------
	select.selectedIndex = 3;

    //-->
    </script>

  </body>
</html>

■１つのアイテムを選択する（値指定）

value プロパティを使用します。

<OPTION> 要素に、重複しない value 属性値を、設定しておく必要があります。

null 値などの、実在しない値を指定すると、未選択状態に変化します。

１つのアイテムを選択する（値指定）


<html>
  <body>

  <select size="1" id="aaa" >

    <option value="value_a" >アイテム０</option>
    <option value="value_b" >アイテム１</option>
    <option value="value_c" >アイテム２</option>
    <option value="value_d" >アイテム３</option>
    <option value="value_e" >アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// １つのアイテムを選択する（値指定）
	// ------------------------------------------------------------
	select.value = "value_d";

    //-->
    </script>

  </body>
</html>

■複数のアイテムを選択する

■任意のアイテムを取得する

こちらで解説しています。

■アイテムから選択状態を設定する

selected プロパティを使用します。

true を指定すると、選択状態に変化します。

■設定例

複数のアイテムを選択する（位置指定）


<html>
  <body>

  <select size="5" multiple id="aaa" >

    <option>アイテム０</option>
    <option>アイテム１</option>
    <option>アイテム２</option>
    <option>アイテム３</option>
    <option>アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムリストを取得する
	// ------------------------------------------------------------
	var option_list = select.options;

	// ------------------------------------------------------------
	// 1 番目のアイテムを取得する
	// ------------------------------------------------------------
	var option = option_list[1];

	// 選択状態を設定する
	option.selected = true;

	// ------------------------------------------------------------
	// 3 番目のアイテムを取得する
	// ------------------------------------------------------------
	var option = option_list[3];

	// 選択状態を設定する
	option.selected = true;

    //-->
    </script>

  </body>
</html>

■選択されたすべてのアイテムを取得する

selectedOptions プロパティを使用します。

HTMLCollection オブジェクトが得られます。

HTMLCollection オブジェクトは、配列のように中身を取り出せます。

中には、HTMLOptionElement オブジェクトが格納されています。

■ブラウザが対応していない場合

Internet Explorer 6 でも動作する代替関数です。

選択されたすべてのアイテムを取得する関数


// ------------------------------------------------------------
// 選択されたすべてのアイテムを取得する関数
// ------------------------------------------------------------
function SelectElement_GetSelectedOptions(element){
	if(element.selectedOptions){
		return element.selectedOptions;
	}
	var ary = new Array();
	var options = element.options;
	var num = options.length;
	var i;
	for(i=0;i < num;i++){
		if(options[i].selected) ary.push(options[i]);
	}
	return ary;
}

■使用例

選択されたすべてのアイテムを取得する


<html>
  <body>

  <select size="5" multiple id="aaa" >

    <option>アイテム０</option>
    <option selected >アイテム１</option>
    <option>アイテム２</option>
    <option selected >アイテム３</option>
    <option selected >アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 選択されたすべてのアイテムを取得する関数
	// ------------------------------------------------------------
	function SelectElement_GetSelectedOptions(element){
		if(element.selectedOptions){
			return element.selectedOptions;
		}
		var ary = new Array();
		var options = element.options;
		var num = options.length;
		var i;
		for(i=0;i < num;i++){
			if(options[i].selected) ary.push(options[i]);
		}
		return ary;
	}


	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 選択されたすべてのアイテムを取得する
	// ------------------------------------------------------------
	var option_list = SelectElement_GetSelectedOptions(select);

	// ------------------------------------------------------------
	// 出力テスト
	// ------------------------------------------------------------
	var i;
	var num = option_list.length;
	for(i=0;i < num; i++){
		var option = option_list[i];
		console.log(option);
	}

    //-->
    </script>

  </body>
</html>

■アイテムの選択状態が変化したか監視する

onchange イベントを使用します。

■単数選択の場合

アイテム選択状態が変化したか監視する（単数選択の場合）


<html>
  <body>

  <select size="5" id="aaa" >

    <option value="value_a" >アイテム０</option>
    <option value="value_b" >アイテム１</option>
    <option value="value_c" >アイテム２</option>
    <option value="value_d" >アイテム３</option>
    <option value="value_e" >アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--
	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムの選択状態が変化すると実行されるイベント
	// ------------------------------------------------------------
	select.onchange = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// 選択されたアイテムの情報を取得
		// ------------------------------------------------------------
		// 位置を取得
		var index = select.selectedIndex;

		// 値を取得
		var value = select.value;

		// 要素を取得
		var option = select.options[select.selectedIndex];

		// ラベルを取得
		var label = option.text;

		// ------------------------------------------------------------
		// 出力テスト
		// ------------------------------------------------------------
		console.log( "index:" + index );
		console.log( "value:" + value );
		console.log( "label:" + label );
		console.log( option );

	};

    //-->
    </script>

  </body>
</html>

■複数選択の場合

アイテム選択状態が変化したか監視する（複数選択の場合）


<html>
  <body>

  <select size="5" multiple id="aaa" >

    <option value="value_a" >アイテム０</option>
    <option value="value_b" >アイテム１</option>
    <option value="value_c" >アイテム２</option>
    <option value="value_d" >アイテム３</option>
    <option value="value_e" >アイテム４</option>

  </select>

    <script type="text/javascript">
    <!--

	// ------------------------------------------------------------
	// 選択されたすべてのアイテムを取得する関数
	// ------------------------------------------------------------
	function SelectElement_GetSelectedOptions(element){
		if(element.selectedOptions){
			return element.selectedOptions;
		}
		var ary = new Array();
		var options = element.options;
		var num = options.length;
		var i;
		for(i=0;i < num;i++){
			if(options[i].selected) ary.push(options[i]);
		}
		return ary;
	}


	// ------------------------------------------------------------
	// "aaa" という ID 属性のエレメントを取得する
	// ------------------------------------------------------------
	var select = document.getElementById("aaa");

	// ------------------------------------------------------------
	// アイテムの選択状態が変化すると実行されるイベント
	// ------------------------------------------------------------
	select.onchange = function (e){
		if(!e) e = window.event; // レガシー

		// ------------------------------------------------------------
		// 選択された OPTION 要素のリストを取得
		// ------------------------------------------------------------
		var selected_options = SelectElement_GetSelectedOptions(select);

		// ------------------------------------------------------------
		// OPTION 要素から各情報を取得
		// ------------------------------------------------------------
		var selected_indexes = new Array();
		var selected_values = new Array();
		var selected_labels = new Array();

		var i;
		var num = selected_options.length;
		for(i=0;i < num;i++){

			// 要素を取得
			var option = selected_options[i];

			// 位置を取得
			selected_indexes.push( option.index );

			// 値を取得
			selected_values.push( option.value );

			// ラベルを取得
			selected_labels.push( option.text );

		}

		// ------------------------------------------------------------
		// 出力テスト
		// ------------------------------------------------------------
		console.log( selected_indexes );
		console.log( selected_values );
		console.log( selected_labels );
		console.log( selected_options );

	};

    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る