- 締切済み
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>
- nsm352
- お礼率14% (1/7)
- JavaScript
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
質問内容がいろいろあるので、よくわかんないけれど… とりあえず、サンプルとして。（セレクトのオプションは3個にしてあります） 選択のたびに計算値が表示されるのもどうかと思うけれど、ご質問で提示されているものがそんな仕様みたいなので… <html> <head><title>test</title> <script type="text/javascript"> function prophecy(evt) { var data = [ ['8,24,200/マグロ','2,205,1555/みかん','3,100,180/トマト'], ['7,30,100/サンマ','3,100,1000/メロン','4,200,300/レタス'], ['6,20,300/カツオ','4,300,800/りんご','5,300,500/ピーマン'] ]; var t = evt.target || evt.srcElement; var i, opt, d, s, f = t.form; if (t.name == 'month') { //セレクトの連動処理 opt = f.elements['food'].options, opt.length = 0; d = data[t.selectedIndex]; for (i=0; i<d.length; i++) { s = d[i].split('/'); opt[opt.length] = new Option(s[1], s[0]); } } //番号計算 s = f.getElementsByTagName('SELECT'); d = s[1].value.split(','); var num = s[2].value*s[3].value*365/20; num -= (s[3].value*d[2]*365-s[0].value*d[2]*d[0])/d[0]/d[1]; document.getElementById('lucky').value = parseInt(num); //チェック用 document.getElementById('check').innerHTML = 's='+s[0].value+', a='+d[0]+', b= '+d[1]+', c='+d[2]; } </script> </head> <body> <form id="foretell" action="#"> 私の誕生月は <select name="month" onchange="prophecy(event)"> <option value="23">1月 <option value="12">2月 <option value="56">3月 </select><br> 好きな食べ物は <select name="food" onchange="prophecy(event)"> <option value="8,24,200">マグロ <option value="2,205,1555">みかん <option value="3,100,180">トマト </select> <p> 私の好きな３桁の数字は <select name="number_1" onchange="prophecy(event)"> <option value="100">100 <option value="200">200 <option value="300">300 </select><br> 私の好きな２桁の数字は <select name="number_2" onchange="prophecy(event)"> <option value="10">10 <option value="20">20 <option value="30">30 </select> <hr> あなたのラッキーナンバーは <input type="text" name="lucky" id="lucky" value="" size="8" readonly> です。 </form> <hr> <div id="check"></div> </body> </html>
質問がわかりにくいので、問題を切り分けます。 (認識違いがあれば指摘してください。) 1. セレクトメニューの選択肢に応じた連動 2. セレクトメニューで選ばれた項目の値を取得する方法 3. セレクトメニューで選ばれた項目の値が x, y, z の形式である場合に、それぞれを値として取得する方法 それぞれに対応した答えが含まれている例を下に示します。 長くなったので、2つに分けて投稿します。(スクリプト部分は後です。) 例では、2番目のメニューのセットは2つです。buildSecondMenu()のローカル変数であるoptionsという配列に入っています。 1番目のメニューで選ばれたのが偶数月か奇数月かで、2つのセットのうちどちらが選ぶか決めています。もし2番目の選択肢の内容が月ごとに全て異なるのであれば、2番目のメニューのセットは12個用意する必要があります。 --- <html> <head> <title>test</title> <script type="text/javascript"> </script> </head> <body> <form action="#"> <p> <select id="s0" name="s0"> <option value="23" selected="selected">1月</option> <option value="12">2月</option> <option value="56">3月</option> <option value="89">4月</option> <option value="5">5月</option> <option value="88">6月</option> <option value="70">7月</option> <option value="1">8月</option> <option value="2">9月</option> <option value="3">10月</option> <option value="4">11月</option> <option value="5">12月</option> </select> <select id="s1" name="s1"></select> </p> <p> <input id="display" type="button" value="結果表示" /> </p> </form> <p>計算結果は<span id="result">***</span>です。</p> </body> </html>
補足
kaorine様、ありがとうございます。問題の切り分けで、1,2,3すべて私の質問に対して認識違いはありません。 また、2番目の選択肢の内容が月ごとに全て異なるので、その方向でお願いします。
補足
fujillin様、お返事ありがとうございます。私のミスでうっかりしてたところがありまして、 私の誕生月は <select name="month" onchange="prophecy(event)"> <option value="23">1月 <option value="12">2月 <option value="56">3月 </select> ↓の箇所のvalue値を２つワンセットにして 私の誕生月は <select name="month" onchange="prophecy(event)"> <option value="23,10">1月 <option value="12,78">2月 <option value="56,23">3月 </select> という風にもうひとつ変数Kを追加して 私の例で言いますと // 独自の計算式(6) var number_luckey = number_7 - number_6 + K; つまり最後にラッキーナンバーを出す式にKを足したいのですけど、修正できますでしょうか？最初からこういう風に書けばよかったものの、ミスをして大変申し訳ございませんがよろしくお願いします。