2014年09月13日

JavaScript : コンボボックス(SELECT) の追加と削除の処理

コンボボックスは、WEB アプリケーションで使われる事の多いコントロールです。SELECT 要素は、size 属性を指定しなければ、コンボボックスとなりますが、コンボボックスは場所を取らずに多くのデータを扱えるので、非常に便利です。

WEB アプリケーションでは最初にサーバの指定した内容をそのまま使う事が多いですが、利用価値の高いコントロールでかつ、多少複雑な構成になっているので、リストの内容の追加と削除の方法は確実に知っておく必要があります。

selectedIndex プロパティ

コンボボックスを扱う上で最も重要なものです。この中には、その時選択されているリストの番号が入っているので、JavaScript で内容を操作する場合に必ず使用されます。

関連する情報
HTML で 最初から任意の OPTION 要素を選択させるには、OPTION 要素内に selected を書きます。これを利用して、PHP ではページを再表示する際に埋め込みます。
<form name="frm"
	action="<?= $_SERVER['SCRIPT_NAME'] ?>"
	target="_self"
	method="get">
	<select name="address">
		<option value="1" <?= $_GET['address'] == "1" ? "selected" : "" ?>>大阪</option>
		<option value="2" <?= $_GET['address'] == "2" ? "selected" : "" ?>>京都</option>
		<option value="3" <?= $_GET['address'] == "3" ? "selected" : "" ?>>神戸</option>
	</select>
	<input type="submit" name="send" value="送信">
</form>
※ その他の FORM 系 PHP 用 埋め込みテンプレート

表示されているテキストの操作 / options コレクション

SELECT 要素は、実際の値を OPTION 要素のリストで保持します。ほとんどの操作は、SELECT 要素に対して直接実行できますが、OPTION 要素に挟まれたテキストだけは、options コレクション経由で操作します

例: alert(target.value + "/" + target.options[target.selectedIndex].text);

target.value は、現在選択されている option の値です。target.selectedIndex は現在選択されている option の番号なので、options[target.selectedIndex] で参照し、text プロパティを使います

selectedIndex が -1 の状態は未選択状態

selectedIndex に -1 を代入すると、何も表示されない『未選択状態』になります。当然この状態で selectedIndex を参照すると -1 になるので、その場合は何も処理をしないようにする注意が必要です。

add メソッドで追加

通常、このようなメソッドは コレクションに実装されるもので、実際に options にもありますが、SELECT 要素のメソッドとして実行が可能です。

引数には、要素のみを指定する場合と、要素と index を指定する場合がありますが、前者はリストの最後に追加され、後者は指定した index 番号のリストとなります。

新規の option 要素は、document.createElement メソッドで作成します。document.createElement で作成された要素は、既存の画面に表示されているいずれかの要素の下に追加するまでは、画面に表示されません。この場合は、SELECT 要素の add メソッドで追加しますが、一般的には appendChild メソッドで他の要素に追加します。






<script type="text/javascript">
function addOption1( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// コレクションに追加
	target.add(option);
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption2( value, text ) {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// option の数を一つ増やす
	target.length = target.length + 1
	// 増やした option を参照する
	var option = target[target.length-1];
	// 属性をセット
	option.value = value;
	option.text = text;
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption3( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// options コレクションに指定番号で追加
	target.add(option,2);
	// 追加した option を選択
	target.selectedIndex = 2;
}
function removeOption() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択されている index を取得
	var index = target.selectedIndex;
	// -1 の場合何も選択されていない
	if ( index != -1 ) {
		// 選択されている index で削除
		target.remove(index)
	}
}
function displayValueText() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択した内容の値を取得
	alert(target.value + "/" + target.options[target.selectedIndex].text);
}
</script>
<form action="http://winofsql.jp/php_get.php"
	target="my_frame">
	<select name="ken">
		<option value="40">大阪</option>
		<option value="41">京都</option>
		<option value="42">兵庫</option>
		<option value="43">和歌山</option>
		<option value="44">奈良</option>
	</select>
	<input type="submit" value="送信">
</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100"
	style='border:solid 1px #777;'>
</iframe>
<br>
<input type="button"
	value="追加1"
	onclick='addOption1(45,"滋賀1");'>
<input type="button"
	value="追加2"
	onclick='addOption2(45,"滋賀2");'>
<input type="button"
	value="途中追加"
	onclick='addOption3(45,"滋賀3");'>
<br>
<input type="button"
	value="選択を削除"
	onclick='removeOption();'>
<input type="button"
	value="選択した内容を表示"
	onclick='displayValueText();'>



【JavaScriptの最新記事】
posted by at 2014-09-13 20:08 | JavaScript | このブログの読者になる | 更新情報をチェックする