SQLの窓 イラストAC フリー素材

2014年09月25日

JavaScript : コンボボックスの OPTION 部分の操作でたいていのテクニック

コンボボックスのリストを全て削除

▼ 実際の実行
<script type="text/javascript">
function resetCombo() {

	var combo = document.frm1.combo1
	combo.length = 0;

}
</script>
<form name="frm1">
	<select name="combo1"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="全て削除"
	onclick='resetCombo();'>
一つづつ削除する場合は、combo.remove(index) です。


コンボボックスにリストを追加する

▼ 実際の実行
<script type="text/javascript">
function addCombo() {

	var combo = document.frm2.combo2;
	var option = null;

	for( i = 0; i < 4; i++ ) {
		option = document.createElement("option");
		option.value = i+1;
		option.text = "オプション"+(i+1);
		combo.appendChild(option)
	}

}
</script>
<form name="frm2">
	<select name="combo2"
		style='width:150px;'>
	</select>
</form>
<input type="button"
	value="データ追加"
	onclick='addCombo();'>
コンボボックスにリストを挿入する

▼ 実際の実行
<script type="text/javascript">
function insertOption() {

	var combo = document.frm3.combo3;
	var option = document.createElement("option");
	option.value = 1.5;
	option.text = "データ1.5";
	combo.insertBefore(option,combo.options[1]);
}
</script>
<form name="frm3">
	<select name="combo3"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト挿入"
	onclick='insertOption();'>
コンボボックスのリスト移動する

▼ 実際の実行
<script type="text/javascript">
function moveOption() {

	var combo = document.frm4.combo4;
	combo.insertBefore(combo.options[1],combo.options[3]);
}
</script>
<form name="frm4">
	<select name="combo4"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト移動"
	onclick='moveOption();'>
コンボボックスのテキスト部分を取得

▼ 実際の実行
<script type="text/javascript">
function getOptionText() {

	var combo = document.frm5.combo5;
	alert( combo.options[2].text );

}
</script>
<form name="frm5">
	<select name="combo5"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="リスト参照"
	onclick='getOptionText();'>
コンボボックスの選択状態を操作する

▼ 実際の実行
<script type="text/javascript">
function selectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = 2;

}
function noSelectOption() {

	var combo = document.frm6.combo6;
	combo.selectedIndex = -1;

}
</script>
<form name="frm6">
	<select name="combo6"
		style='width:150px;'>
		<option value="1">データ1
		</option>
		<option value="2">データ2
		</option>
		<option value="3">データ3
		</option>
		<option value="4">データ4
		</option>
	</select>
</form>
<input type="button"
	value="データ3を選択"
	onclick='selectOption();'>
<input type="button"
	value="未選択"
	onclick='noSelectOption();'>
昔はこの方法は使え無いブラウザがあったかもしれません。全て直感的な操作ですが、本来 options コレクションに対して実行するような内容が、コンボボックスに直接可能になっています。



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


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX