JavaScript プログラミング講座

 

セレクト要素について

 


■ <SELECT> 要素について

 
セレクト要素は、コントロール要素の一種です。
 
コンボボックスや、リストボックスを設置できます。
 
■コンボボックスの設置例
 
<SELECT> タグを使用して、コンボボックスを表示する

<form>

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

    <option value="aaa" >アイテム0</option>
    <option value="bbb" >アイテム1</option>
    <option value="ccc" >アイテム2</option>

  </select>

</form>
 
サンプル表示

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

<form>

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

    <option value="aaa" >アイテム0</option>
    <option value="bbb" >アイテム1</option>
    <option value="ccc" >アイテム2</option>

  </select>

</form>
 
サンプル表示

  
 

■ <OPTION> 要素について

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

■ <OPTGROUP> 要素について

 
複数のアイテムを、グループ化する事ができます。
 
<OPTGROUP> タグを使用して、アイテムをグループ化する

<form>

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

    <optgroup label="グループ1" >
      <option value="aaa" >アイテム0</option>
      <option value="bbb" >アイテム1</option>
      <option value="ccc" >アイテム2</option>
    </optgroup>

    <optgroup label="グループ2" >
      <option value="ddd" >アイテム3</option>
      <option value="eee" >アイテム4</option>
    </optgroup>

    <option value="fff" >アイテム5</option>
    <option value="ggg" >アイテム6</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>アイテム0</option>
        <option>アイテム1</option>
        <option>アイテム2</option>
      </select>

    </form>

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

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

    //-->
    </script>

  </body>
</html>
 


 

セレクト要素を設定する

 
 


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

 
■プロパティ一覧(一部抜粋)
 
プロパティ名説明
disabledBooleanセレクト要素を無効状態に設定する
sizeNumberセレクト要素の高さを設定する(アイテム数指定)
multipleBoolean複数選択の有無を設定する
 
プロパティ名説明
nameString名前を設定する
valueString値を設定する(1つのアイテム選択)
autofocusBoolean初期フォーカスの有無を設定する(DOM構築が完了した瞬間)
requiredBoolean入力必須の有無を設定する
willValidateBooleanバリデートの有無を設定する
validationMessageStringバリデートのエラーメッセージを設定する
 

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

 
disabled プロパティを使用します。
 
true をセットすると、無効状態となります。
 
■無効状態について
 
セレクト要素を選択する事はできません。
 
■使用例
 
セレクト要素を無効状態に設定する

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

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

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム0")) );
select.add( (new Option("アイテム1")) );
select.add( (new Option("アイテム2")) );

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

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

 
size プロパティを使用します。
 
高さだけでなく、外観も変化します。
 
1 を指定すると、コンボボックスに変化します。
 
2 以上を指定すると、リストボックスに変化します。
 
デフォルトは、1 です。
 
■使用例
 
コンボボックスを設置する

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

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

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム0")) );
select.add( (new Option("アイテム1")) );
select.add( (new Option("アイテム2")) );

// ------------------------------------------------------------
// セレクト要素の高さを設定する(アイテム数指定)
// ------------------------------------------------------------
select.size = 1;
 
リストボックスを設置する

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

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

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム0")) );
select.add( (new Option("アイテム1")) );
select.add( (new Option("アイテム2")) );

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

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

 
multiple プロパティを使用します。
 
■アイテムの複数選択に対応する
 
外観をリストボックスに変更します。
 
size プロパティに、2 以上の値を指定します。
 
multiple プロパティに、true を指定します。
 
■使用例
 
複数選択の有無を設定する

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

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

// ------------------------------------------------------------
// リストを構築する
// ------------------------------------------------------------
select.add( (new Option("アイテム0")) );
select.add( (new Option("アイテム1")) );
select.add( (new Option("アイテム2")) );
select.add( (new Option("アイテム3")) );
select.add( (new Option("アイテム4")) );

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

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


 

アイテムを登録する

 
 


■ 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> 要素を含む、2世代のノードツリー構築も可能です。
 
■使用例(1世代のみ)
 
DOM API を使って、アイテムをリストに登録する(1世代)

// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
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);

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

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

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

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

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

// セレクト要素のノードリストに登録する(最後尾)
select.appendChild(option1);
 
■使用例( OPTGROUP 要素を含めた2世代)
 
DOM API を使って、アイテムをリストに登録する(2世代)

// ------------------------------------------------------------
// アイテムを作成する関数
// ------------------------------------------------------------
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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

		// グループ1のノードリストに登録する(最後尾)
		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);

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

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

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

// アイテムをリストに登録する(最後尾)
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);

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

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

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

// アイテムをリストの 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 , "アイテム0" , "値A") );
select.appendChild( Document_Create_OptionElement(document , "アイテム1" , "値B") );
select.appendChild( Document_Create_OptionElement(document , "アイテム2" , "値C") );
select.appendChild( Document_Create_OptionElement(document , "アイテム3" , "値D") );
select.appendChild( Document_Create_OptionElement(document , "アイテム4" , "値E") );

// ------------------------------------------------------------
// セレクト要素の高さを設定する(アイテム数指定)
// ------------------------------------------------------------
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);

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

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

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

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

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

// アイテムをリストに登録する(最後尾)
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);

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

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

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

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

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

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

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

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


 

アイテムを取得する

 
 


■1つのアイテムを取得する(位置指定)

 
■アイテムリストから取得する
 
options プロパティを使用します。
 
配列アクセス演算子を使って、任意の番地にアクセスします。
 
■任意の位置のアイテムを取得する
 
item() メソッドを使用します。
 
HTMLSelectElement.item( index ) :HTMLOptionElement
第01引数(略可)Number取得したいアイテムの位置を指定
戻り値 HTMLOptionElementHTMLOptionElement オブジェクトが得られる。存在しない場合 null
 
■取得例
 
1つのアイテムを取得する(位置指定)

<html>
  <body>

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

    <option>アイテム0</option>
    <option>アイテム1</option>
    <option>アイテム2</option>
    <option>アイテム3</option>
    <option>アイテム4</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>
 

■1つのアイテムを取得する(名前指定)

 
■任意の名前のアイテムを取得する
 
namedItem() メソッドを使用します。
 
HTMLSelectElement.namedItem( name ) :HTMLOptionElement
第01引数(略可)String取得したいアイテムの名前を指定
戻り値 HTMLOptionElementHTMLOptionElement オブジェクトが得られる。存在しない場合 null
 
■取得例
 
1つのアイテムを取得する(名前指定)

<html>
  <body>

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

    <option name="item0" >アイテム0</option>
    <option name="item1" >アイテム1</option>
    <option name="item2" >アイテム2</option>
    <option name="item3" >アイテム3</option>
    <option name="item4" >アイテム4</option>

  </select>

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

	// ------------------------------------------------------------
	// 1つのアイテムを取得する(名前指定)
	// ------------------------------------------------------------
	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>アイテム0</option>
    <option>アイテム1</option>
    <option>アイテム2</option>
    <option>アイテム3</option>
    <option>アイテム4</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>アイテム0</option>
    <option>アイテム1</option>
    <option>アイテム2</option>
    <option>アイテム3</option>
    <option>アイテム4</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>
 


 

アイテムを選択する

 
 


■1つのアイテムを選択する(位置指定)

 
selectedIndex プロパティを使用します。
 
0 から始まる位置を指定します。
 
-1 などの、実在しない位置を指定すると、未選択状態に変化します。
 
1つのアイテムを選択する(位置指定)

<html>
  <body>

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

    <option>アイテム0</option>
    <option>アイテム1</option>
    <option>アイテム2</option>
    <option>アイテム3</option>
    <option>アイテム4</option>

  </select>

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

	// ------------------------------------------------------------
	// 1つのアイテムを選択する(位置指定)
	// ------------------------------------------------------------
	select.selectedIndex = 3;

    //-->
    </script>

  </body>
</html>
 

■1つのアイテムを選択する(値指定)

 
value プロパティを使用します。
 
<OPTION> 要素に、重複しない value 属性値を、設定しておく必要があります。
 
null 値などの、実在しない値を指定すると、未選択状態に変化します。
 
1つのアイテムを選択する(値指定)

<html>
  <body>

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

    <option value="value_a" >アイテム0</option>
    <option value="value_b" >アイテム1</option>
    <option value="value_c" >アイテム2</option>
    <option value="value_d" >アイテム3</option>
    <option value="value_e" >アイテム4</option>

  </select>

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

	// ------------------------------------------------------------
	// 1つのアイテムを選択する(値指定)
	// ------------------------------------------------------------
	select.value = "value_d";

    //-->
    </script>

  </body>
</html>
 

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

 
■任意のアイテムを取得する
 
こちら で解説しています。
 
■アイテムから選択状態を設定する
 
selected プロパティを使用します。
 
true を指定すると、選択状態に変化します。
 
■設定例
 
複数のアイテムを選択する(位置指定)

<html>
  <body>

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

    <option>アイテム0</option>
    <option>アイテム1</option>
    <option>アイテム2</option>
    <option>アイテム3</option>
    <option>アイテム4</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>アイテム0</option>
    <option selected >アイテム1</option>
    <option>アイテム2</option>
    <option selected >アイテム3</option>
    <option selected >アイテム4</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" >アイテム0</option>
    <option value="value_b" >アイテム1</option>
    <option value="value_c" >アイテム2</option>
    <option value="value_d" >アイテム3</option>
    <option value="value_e" >アイテム4</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" >アイテム0</option>
    <option value="value_b" >アイテム1</option>
    <option value="value_c" >アイテム2</option>
    <option value="value_d" >アイテム3</option>
    <option value="value_e" >アイテム4</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>