javascriptでセレクトメニューの連動と自動計算
最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。
セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。
そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに３個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。
連動はここまでで、新たに好きな３桁の数字のセレクトメニューと
好きな２桁の数字のセレクトメニューを作り、独自の計算式(1)～(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。
同様に食べ物のある項目を選択すると、その項目に設定した３個ワンセットの数字を計算式に代入させる(A,B,Cに代入)やり方が解りません。
解る部分は、ある書物を参考にして書いてみましたが、つなぎ合わせた感じになってしまって、すみません。そして説明の仕方がややこしくなってしまいましたがよろしくお願いします。(独自の計算式(1)～(6)の内容は気にしないで下さい)
----------------------------------------------------------------
<html>
<head>
<title>あなたのラッキーナンバー</title>
</head>
<body>
<form name="calcuation">
//セレクトメニューの連動部分が解りません。こんな感じにしたいのですが。
私の誕生月は
<select name="month" onChange="calculation();">
<option value="23">1月 // ここには数字の「23(Sに代入)」が格納されている
<option value="12">2月 // ここには数字の「12(Sに代入)」が格納されている
<option value="56">3月
<option value="89">4月
<option value="5" selected>5月
<option value="88">6月
<option value="70">7月
<option value="">8月
<option value="">9月
<option value="">10月
<option value="">11月
<option value="">12月
</select>で、
(例えば、３月を選択すると食べ物メニューが出て選択する)
好きな食べ物は
<select name="food" onChange="calculation();">
<option>トマト
<option value="8,24,200">マグロ //ここには数字の「8,24,200(A,B,Cにワンセットでそれぞれに代入)」が格納されている
<option value="2,205,1555">みかん //ここには数字の「2,205,1555(A,B,Cにワンセットでそれぞれに代入)」が格納されている
<option>納豆
<option selected>豆腐
<option>ラーメン
</select>
です
つまり、１月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。
ここから下の部分は参考書を元に書いてみました。
私の好きな３桁の数字は
<select name="number_1" onChange="calculation();">
<option>100
<option>200
<option>300
<option>400
<option selected>500
<option>600
<option>700
<option>800
<option>900
</select>で、私の好きな２桁の数字は
<select name="number_2" onChange="calculation();">
<option>10
<option>20
<option>30
<option>40
<option selected>50
<option>60
<option>70
<option>80
<option>90
</select>
あなたのラッキーナンバーは<input type="text" name="number_luckey" class="text_color" value="0" size="8" maxlength="6">です。
</form>
</body>
</html>
<script type="text/javascript">
// この辺に何かの記述が必要ですよね。
function calculation() {
// 好きな３桁の数字
var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text);
// 好きな２桁の数字
var number_2 = parseInt(document.calcuation.number_2[document.calcuation.number_2.selectedIndex].text);
// 独自の計算式(1)
var number_3 = number_2 * 365;
// 独自の計算式(2)
var number_4 = (number_3 / A) - S;
// 独自の計算式(3)
var number_5 = number_4 / B;
// 独自の計算式(4)
var number_6 = number_5 * C;
// 独自の計算式(5)
var number_7 = number_1 * number_2 / 20 * 365;
// 独自の計算式(6)
var number_luckey = number_7 - number_6;
document.calcuation.number_luckey.value = number_luckey;
return;
}
</script>
お礼
紹介頂いたURLは以前試してみたのですがダメでした。 ありがとうございました。 直接買ったわけではないですけど、ディーラーに聞いてみます。