■オプションの設定や選択状態を参照、変更したい

1.ワインの種類を選択してください。

2.ブドウの品種を選んでください。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>オプションの設定や選択状態を参照、変更したい</title>
<script type="text/JavaScript">
<!--
function sel_chg() {
if (document.fm1.select_1.selectedIndex == 0) {
document.fm1.select_2.options[0].text = "カベルネ・ソーヴィニヨン";
document.fm1.select_2.options[1].text = "ジンファンデル";
document.fm1.select_2.options[2].text = "メルロー";
document.fm1.select_2.options[3].text = "ピノ・ノワール";
document.fm1.select_2.options[4].text = "シラー";
} else {
document.fm1.select_2.options[0].text = "シャルドネ";
document.fm1.select_2.options[1].text = "マスカット";
document.fm1.select_2.options[2].text = "ピノ・ブラン";
document.fm1.select_2.options[3].text = "リースリング";
document.fm1.select_2.options[4].text = "ヴィオニエ";
}
}
function disp() {
var msg1_no = document.fm1.select_1.selectedIndex;
var msg2_no = document.fm1.select_2.selectedIndex;
var msg1 = document.fm1.select_1.options[msg1_no].text;
var msg2 = document.fm1.select_2.options[msg2_no].text;
alert("お!お客さん!!\n「"+msg1+"」の中でも【"+msg2+"】を選ぶとは。\nただ者じゃないね。");
}
// -->
</script>
</head>
<body>
<p>■オプションの設定や選択状態を参照、変更したい</p>
<form name="fm1" action="mailto:tateda-yoshio@nifty.com" method="post" enctype="text/plain">
<p>1.ワインの種類を選択してください。<br>
<select name="select_1" size="2" onchange="sel_chg()">
<option value="赤ワイン">赤ワイン</option>
<option value="白ワイン">白ワイン</option>
</select></p>
<p>2.ブドウの品種を選んでください。<br>
<select name="select_2" size="5">
<option value="area1">はじめに種類を選んでください</option>
<option value="area2">---</option>
<option value="area3">---</option>
<option value="area4">---</option>
<option value="area5">---</option>
</select></p>
<p><input type="button" name="bt1" value="上を選んでからクリックしてね" onclick="disp()"></p>
</form>

</body>
</html>


★解説★