フォームコントロールの表示／非表示
ラジオボタンの選択に従って一連のフォームコントロールを表示または非表示にする。
<![CDATA[
function togglePurDec(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var block = document.getElementById("music");
if (target.id == "yes") {
block.style.display = "block";
} else {
block.style.display = "none";
}
}
<form >
<p>
読書はお好きですか？<br>
<input type="radio" id="yes" name="ans" onclick="togglePurDec(event)"> はい
<input type="radio" id="no" name="ans" onclick="togglePurDec(event)">いいえ
</p>
<div id="music" style="display:none; margin-left:20px">
<p>
お好きなジャンルは？<br>
<select name="PurBudget">
<option value="">選択してください</option>
<option value="1">日本文学</option>
<option value="2">外国文学</option>
<option value="3">ビジネス</option>
<option value="4">歴史</option>
<option value="5">テクノロジー</option>
</select>
</p>
<p>
ご意見・ご感想をどうぞ<br>
<textarea name="comment" rows="5" cols="30"></textarea>
</p>
</div>
</form>
]]>
フォームコントロールの入力禁止／許可
チェックボックスの選択・非選択によって、ラジオボタンの入力の禁止・許可を切り替えます。
ページ読み込み時点では、チェックボックスがオフであってもラジオボタンが入力可能となるのでonloadにもtoggle関数を実行します。
<![CDATA[
function toggle () {
var i;
// option_courseの各ラジオボタンの入力禁止／許可を切り替える
for (i = 0; i < document.myform.option_course.length; i++) {
document.myform.option_course[i].disabled
= !document.myform.option_tour.checked;
}
}
<body onload="toggle();">
<form name="myform" method="get" action="">
<input type="checkbox" name="option_tour"value="1" onclick="toggle();" /">
オプションツアーに参加する<br />
<input type="radio" name="option_course" value="A" checked="checked" />Aコース
<input type="radio" name="option_course" value="B" />Bコース
<input type="radio" name="option_course" value="C" />Cコース
</form>
]]>
複数選択ボックス
選択ボックスで選択されている項目を取得するには、SelectオブジェクトのselectedIndexプロパティまたはvalueプロパティを使います。
ただし、multiple属性によって複数選択可能となっている場合は、最初に選択された項目しか得られません。
複数の選択項目を取得するには、Optionオブジェクトのselectedプロパティの値を調べます。
<![CDATA[
function check(obj)
{
// 選択ボックスの値の取得
var result = "";
for(var i=0; i<obj.color.length; i++){ if( obj.color.options[i].selected == true ){ // 項目が選択されている場合 result += obj.color.options[i].value + " "; // 項目の値を取得 } } alert( result +"が選択されています"); } <form action="#">
<select name="color" multiple="multiple">
<option value="赤">赤</option>
<option value="青">青</option>
<option value="黄">黄</option>
<option value="白">白</option>
<option value="黒">黒</option>
<option value="緑">緑</option>
</select>
<input type="button" value="決定" onclick="check(this.form)" />
</form>
]]>
プルダウンメニューのリンク
例（１）
選択ボックスが選択された時に処理を行いたい場合は、select要素にonchangeイベントハンドラを定義します。
Selectオブジェクトのvalueプロパティで、選択されたoption要素のvalue属性を取得します。
<![CDATA[
function selected() {
location.href = document.getElementById("pullmenu").value;
}
<form action="#">
<select id="pullmenu" onchange="selected()">
<option value="">---</option>
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.yahoo.co.jp/">Yahoo! Japan</option>
<option value="http://www.infoseek.co.jp/">Infoseek</option>
</select>
</form>
]]>
例（２）
リンク先が選択されていなければメッセージを表示。ジャンプ前には確認メッセージを表示。
<![CDATA[
function jump() {
// ジャンプ先が選択されていない場合
if (document.myform.url.selectedIndex == -1) {
alert("ジャンプ先を選択してください");
}
else {
var selIdx = document.myform.url.selectedIndex;
var siteName = document.myform.url.options[selIdx].text;
var siteUrl = document.myform.url.value;
// ジャンプするかどうかを確認
if (confirm(siteName + "へジャンプします")) {
location.href = siteUrl;
}
}
}
<form name="myform" method="get" action="">
<select name="url" size="5">
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.yahoo.co.jp/">Yahoo! Japan</option>
<option value="http://www.infoseek.co.jp/">Infoseek</option>
</select>
<br />
<input type="button" value="ジャンプ" onclick="jump(); return false;" />
</form>
]]>
