選択ボックスで別の選択ボックスの内容変更
原案：平井 公大 氏 （2000/09/16 登録）
最初の選択ボックスの選択結果によって、次の選択ボックスの内容が変わります。別のサンプル「選択ボックスでリンク」と組み合わせることで、複数の条件の選択結果でリンク先を分けることができます。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>選択ボックスで別の選択ボックスの内容変更</title>
<script type="text/javascript">
<!--
function chgdata1(form) {
if( form.NameOption.selectedIndex == 0 ) {
form.ForumName.options[0].text = "FHPG "
form.ForumName.options[1].text = "FBGF "
form.ForumName.options[2].text = "FWEBKK "
} else {
form.ForumName.options[0].text = "ホームページ作りのフォーラム"
form.ForumName.options[1].text = "ビギナーズフォーラム "
form.ForumName.options[2].text = "ＷＥＢ快適活用フォーラム "
}
}
function chgdata2(form) {
if( form.index1.selectedIndex == 0 ) {
form.index2.options.length = 3; //options配列の要素数を変更
form.index2.options[0].text = "りんご "
form.index2.options[1].text = "バナナ "
form.index2.options[2].text = "みかん "
} else {
form.index2.options.length = 5; //options配列の要素数を変更
form.index2.options[0].text = "だいこん"
form.index2.options[1].text = "キャベツ"
form.index2.options[2].text = "にんじん"
form.index2.options[3].text = "レタス "
form.index2.options[4].text = "白菜 "
}
}
// -->
</script>
</head>
<body>
<div style="text-align:center">
<h2>個数が同じ場合</h2>
<form>
<select name="NameOption" size="0" onChange="chgdata1(this.form)">
<option selected>フォーラムIDで表示</option>
<option>フォーラム名称で表示</option>
</select>
<select name="ForumName" size="0">
<option selected>FHPG </option>
<option>FBGF </option>
<option>FWEBKK </option>
</select>
</form>
<h2>個数が違う場合</h2>
<form>
<select name="index1" size="0" onChange="chgdata2(this.form)">
<option selected>果物</option>
<option>野菜</option>
</select>
<select name="index2" size="0">
<option selected>りんご </option>
<option>バナナ </option>
<option>みかん </option>
</select>
</form>
</div>
</body>
</html>
