prototype.js｜フォームの操作(1)

選択した項目の値によって、別項目の初期値を切り替えたり、使用可・不可を切り替えたりする。

条件分岐でSWITCHを使っているのは、項目が増えたときの拡張が、そっちの方が楽かな～というだけ。IFの方がたぶん処理は早いんで、条件次第では普通にIF文の方がいいかも。
同様にradioの方でeachを使ってるのも同じような理由…っていうのはタテマエで、単にeachの使い方の勉強のようなもの。
でも同じ処理をする項目が多ければ、eachでまとめる方が簡潔だとは思う。
今回onClickやonChangeで呼ぶ関数に引数は持たせなかったけど、似た処理をする入力項目が多いなら、対象となる項目のIDを引数に持つなどするといいのかな、と思う。

- HTML

<form action="#">
<p class="txt">選択項目1で選んだ項目によって、選択項目2の使用可否が変わる</p>
選択項目1
<select id="sel01" onchange="SetSelectItem();">
	<option value="item01_1">選択項目2使用可</option>
	<option value="item01_2" selected>選択項目2使用不可：初期選択項目</option>
	<option value="item01_3">選択項目2使用可</option>
	<option value="item01_4">選択項目2使用可</option>
	<option value="item01_5">選択項目2使用不可</option>
</select>
<br>
選択項目2
<select id="sel02">
	<option value="item02_1">項目01</option>
	<option value="item02_2">項目02</option>
	<option value="item02_3">項目03</option>
</select>
<br><br>
<p class="txt">オプション1で選んだ項目によって、オプション2の選択できる項目が変わる<br>
（桃の場合PEACH、林檎の場合APPLE/GREEN APPLEのみ選択可能）<br>
初期状態→オプション1＝林檎　オプション2＝GREEN APPLEが選択</p>
オプション1<br>
<input type="radio" name="radio01" id="radio01_1" onclick="SetRadioItem();"><label for="radio01_1" id="label01_1">桃</label>
<input type="radio" name="radio01" id="radio01_2" onclick="SetRadioItem();" checked><label for="radio01_2" id="label01_2">林檎</label>
<br>
オプション2<br>
<input type="radio" name="radio02" id="radio02_1"><label for="radio02_1" id="label02_1">PEACH</label>
<input type="radio" name="radio02" id="radio02_2"><label for="radio02_2" id="label02_2">APPLE</label>
<input type="radio" name="radio02" id="radio02_3" checked><label for="radio02_3" id="label02_3">GREEN APPLE</label>

</form>

- JavaScript

// デフォルト
		default:
			// 使用可にする
			$("sel02").disabled = false;
	}
}

/function SetRadioItem(){
	// RADIO(ID="radio01_1"：桃)がチェックされている場合
	if ($("radio01_1").checked){
		// PEACH：使用可に
		$("radio02_1").disabled = false;
		// APPLE・GREEN APPLE：使用不可に
		$("radio02_2","radio02_3").each(function(obj){
			obj.disabled = true;
			// APPLE・GREEN APPLEがチェック済みなら、桃にチェックを移動
			if (obj.checked){
				$("radio02_1").checked = true;
			}
		});
		// ラベルの色を設定：disableTextを設定すると文字がグレーに
		Element.removeClassName("label02_1", "disableText");
		// addClassName(or removeClassName)の1つ目の引数はID名でもオブジェクトでもOK
		$("label02_2","label02_3").each(function(obj){
			Element.addClassName(obj, "disableText");
		});
	
	} else {
	// そうではない場合（＝林檎の方がチェック）

// PEACH：使用不可に
		$("radio02_1").disabled = true;
		// PEACHがチェック済みなら、APPLEにチェックを移動
		if ($("radio02_1").checked){
			$("radio02_2").checked = true;
		}
		// APPLE・GREEN APPLE：使用可に
		$("radio02_2","radio02_3").each(function(obj){
			obj.disabled = false;
		});
		// ラベルの色を設定：disableTextを設定すると文字がグレーに
		Element.addClassName("label02_1", "disableText");
		$("label02_2","label02_3").each(function(obj){
			Element.removeClassName(obj, "disableText");
		});
	
	}
}

// -->

</script>

- CSS

prototype.js vを使って…

2. フォームの操作(1)　（→jQuery版）

prototype.js vdocument.write(Prototype.Version);を使って…

2. フォームの操作(1) （→jQuery版）

prototype.js vを使って…

2. フォームの操作(1)　（→jQuery版）