- 締切済み
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番目の選択肢の内容が月ごとに全て異なるので、その方向でお願いします。
関連するQ&A
- javascript 自動計算
現在フォームにて自動計算を作っています。 簡単にまとめますと3つのselectboxがあり、選んだ数字によって自動で合計がでてくるという仕様です。 例 <select name="score1"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>合計（ここにはscore1とscore2とscore3の合計が表示される）</p> 数字を変えるたびに合計が変わるようにしたです。 valueに値が無い場合はなしと判断する。 コードの書き方がわからず困っています。 お分かりの方がいらっしゃいましたらご教示お願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューで２つの項目や値を渡す方法はありますか？
良かったら教えてください。 セレクトメニューで２つの項目や値を渡す方法は ありますか？ 普通は、 <select name="test"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> と言う感じですが、 「テスト」を選ぶと name="test1" name="test2"の項目で、 value="1111" value="2222" 選択項目は、１つですが、2つの項目、 2つの値を次のCGIに渡す事は、 可能でしょうか？ 教えてください。
- ベストアンサー
- HTML
- セレクトボックスを使ったJavaScriptでの計算方法
セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。
- ベストアンサー
- JavaScript
- Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
- [JavaScript+<select>]最初から５文字一致でセレクト状態にしたい。
こんばんは。 ＨＴＭＬとＪａｖａＳｃｒｉｐｔで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー１</OPTION> <OPTION value="item2001">メニュー２</OPTION> </SELECT> </FORM> 初期値を「メニュー２」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から５桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- ２つの<select>フォームの完全連動（自動選択）
下記のドロップダウンメニューで、 「１．県名」と「２．ふりがな」が完全に連動するjavascriptをご教示ください。 県名を先に選択しても、ふりがなを先に選択しても 対応する項目が自動で選択される動作を希望しております。 <html> <head></head> <body> <form> １．県名<br> <select name="Address1" class="forms1"> <option value=""></option> <option value="0">東京</option> <option value="1">神奈川</option> <option value="2">埼玉</option> <option value="3">千葉</option> </select> ２．ふりがな<br> <select name="Address2" class="forms1"> <option value=""></option> <option value="0">とうきょう</option> <option value="1">かながわ</option> <option value="2">さいたま</option> <option value="3">ちば</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトメニューで
セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION> メニュー</OPTION> </select> </form></TD>
- 締切済み
- JavaScript
- セレクトボックスの連動
セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0～複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
- セレクトメニューが・・・
CGIでHPをつくり、そのHPから入力HPへ飛びフォームの値をもとのHPに返すということをやっているのですが、ここで、セレクトメニューのvalueの値によってはそこのHPから入力のHPに飛べなくなるという現象がおきてます。 １部ですが、例を示すと・・・ print "<select name='place'>"; print "<option value='aaa：3821'>aaa</option>"; print "<option value='bbb3822'>bbb</option>"; print "<option value='ccc：3801'>ccc</option>"; print "<option value='ddd：3802'>ddd</option>"; print "</select>"; print "<br>"; となっていて、ここで小文字と数字の間に[\n]を１つでも入れるとエラーにはならずしっかり飛ぶことができますが、今のように全て文字と数字だけではなぜかエラーが起こってしまっています・・・ なぜなんでしょうか・・・・？
- 締切済み
- CGI
- ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:02_11}, {key:"小樽市",value:02_12}, {key:"旭川市",value:02_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
補足
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を足したいのですけど、修正できますでしょうか？最初からこういう風に書けばよかったものの、ミスをして大変申し訳ございませんがよろしくお願いします。