• ベストアンサー

inputの数値を参照しselectによる選択肢で決められた数値を表示したい

JavaScript の素人なもので連続の質問となってしまいました。 下記のように field1 の値を参照し、 selectでの選択肢毎に決められた数値を field2 に表示したいのですが、 どういったscriptにすれば良いか、どなたかご教示をお願い致します。 ┏━━━━━┓ ┃ 例) 150 　　┃（必ず1以上の数字が自動で入るinput="text" name="field1"） ┗━━━━━┛ （↓　select） ┏━━━━━━┓　　┏━━━━━┓ ┃ 例) イ　 　 　▼┃　　┃ 例)　B 　 　┃（結果を表示させたいinput="text" name="field2" ） ┗━━━━━━┛　　┗━━━━━┛ 　│　イ　│ 　│　ロ　│ 　│　ハ　│ 　└──┘ 　　　　　　　　（select での選択肢） 　　　　　　　│　イ　│　ロ　│　ハ　│　二 (field1値)　│　　 　│　 　　│　　 　│　　 　1 ～100　│　A　│　F 　│　J　　│　O 101～200　│　B　│　G　 │　K　　│　P 201～300　│　C　│　H　 │　L　　│　Q 301～400　│　D　│　Ｉ　　│　M　　│　R 401～500　│　E　│　H　 │　N　　│　S ※実装する際にはA～Sは数値になります。 以下に素人ながらのソースを記します。 <script type="text/javascript"> <!-- function selectarea(text) { var total = document.form1.field1.value; var choise = document.getElementById("area"); document.form1.field2.value = text; } // --> </script> <form action="" name="form1"> <table> <tr><td><input type="text" name="field1" size="30" value="150"></td></tr> <tr><td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected">選択して下さい</option> <option value="イ">イ</option> <option value="ロ">ロ</option> <option value="ハ">ハ</option> <option value="二">二</option> </select> </td></tr> <tr><td><input type="text" name="field2" size="30"></td></tr> </table> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.3

・　未完成ですが、以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var i; var values = [ [1,2,3,4], [101,102,103,104] ]; function selectarea(index) { var total = document.form1.field1.value; if ( total<=100 ) { i=0; } else if ( total<=200 ) { i=1; } else if ( total<=300 ) { i=2; } else if ( total<=400 ) { i=3; } else { i=4; } document.form1.field2.value = values[i][index]; } function resetAll() { document.getElementById("area").selectedIndex = 0; document.form1.field2.value = ""; } // --> </script> </head> <body> <form action="" name="form1"> <table> <tr> <td> <input type="text" name="field1" size="30" value="150" onChange="resetAll()"> </td> </tr> <tr> <td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected"> 選択して下さい </option> <option value="0">イ</option> <option value="1">ロ</option> <option value="2">ハ</option> <option value="3">二</option> </select> </td> </tr> <tr> <td> <input type="text" name="field2" size="30"> </td> </tr> </table> </form> </body> </html>

hide-key
質問者

お礼

auty様、ご厚意有難う御座います。＾＾ 全てを理解するのは難しい程度の私のスキルですが、 選択肢が増えたりしても対応出来そうな感じがします・・・。 テストしてみてからのお礼では時間がかかってしまいそうなので、 先ずはお礼まで・・・ぺこ <(＿ ＿)> 有難う御座いました。

hide-key
質問者

補足

HIRSYU様、auty様　有難う御座いました。 無事動かす事が出来ました。 お二人のように他の方の質問に答える事ができるように 勉強を重ねたいと思います＾＾ 有難う御座いました。ぺこ <(＿ ＿)>

その他の回答 (2)

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.2

>ANo.1です ANo.1で回答したソースは、0以下だとfield2がクリアするが、501以上だと、field2を変更しないって、中途半端な仕様になってますのでご注意を。

  • HIRSYU
  • ベストアンサー率51% (45/87)
回答No.1

連想配列を使用して、表示したい一覧表を作成した。 表示したい一覧表の行の最大値をキーとした連想配列を作成し、その中身に表示したい列（イロハ）をキーとした連想配列を入れる。 後は比較などをして、目的の値をテキストボックスへ。 -- JavaScript -- var list = { 0 : {"イ":"", "ロ":"", "ハ":"", "ニ":""}, 100 : {"イ":"A", "ロ":"F", "ハ":"J", "ニ":"O"}, 200 : {"イ":"B", "ロ":"G", "ハ":"K", "ニ":"P"}, 300 : {"イ":"C", "ロ":"H", "ハ":"L", "ニ":"Q"}, 400 : {"イ":"D", "ロ":"I", "ハ":"M", "ニ":"R"}, 500 : {"イ":"E", "ロ":"H", "ハ":"N", "ニ":"S"}, }; function selectarea(text) { var total = document.form1.field1.value; if(text.length == 0){ return; } for(key in list){ if(key >= total){ document.form1.field2.value = list[key][text]; break; } } } -- HTML（1行だけ変更） -- <option value="" selected="selected">選択して下さい</option>

hide-key
質問者

お礼

HIRSYU様、ご厚意有難う御座います。＾＾ scriptの内容を理解するのは難しい程の私ですが、 何となくの理論の流れはイメージ出来ました。 力不足なためテストするまでも時間がかかりそうなので、 先ずはお礼まで・・・ぺこ <(＿ ＿)> 有難う御座いました。。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • セレクトボックスの値から料金を計算したい

    お世話になります。 現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円（税込）</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <option value="0">　0部</option> <option value="1">　1部</option> <option value="2">　2部</option> <option value="3">　3部</option> <option value="4">　4部</option> <option value="5">　5部</option> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円（税込）</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円（税込）</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円（税込）</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか？どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。

  • 同一nameの　input type="text" の合計を計算したい

    初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～;　ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>

  • <input> タグテキストフィールドでのretrunの処理

    以下のような<form>があります。この中のfreekey2のテキストエリア に入力した後に、enterキーを押した場合にも、javascript:query()を 動かしたいのです。<input>タグに何らかのイベントハンドラを つけるのでしょうか。よろしく、お願いします。 <form> <table> <tr> <td><select name="period"> <option value="all" selected>全て <option value="2006">2006 </select></td> <td><input type="button" value="検索" onclick="javascript:query()"></td> </tr> <tr> <td>キ－:<select name="freekey"> <option value=".*" selected>すべて <option>ああああ <option>いいいい </select> <input size="20" name="freekey2" type="text"> </td> </tr> </table> </form>

    • ベストアンサー
    • HTML
  • jacascriptとフォームselectメニューで計算した値を保存したい

    お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。 参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が０になってしまっているのです。 希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか？ <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>

  • セレクトボックスでそれ以降の表示を切り替えたい

    http://5am.jp/javascript/form_change_javascript/ の「サンプルソース（セレクトボックス）」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。 以下が自分が書いたコードになります。どこがおかしいのでしょうか？ （インデントがうまくできていなくて申し訳ないです。） 回答よろしくお願いします。 <script type="text/javascript"> function entryChange2() { if (document.getElementById('changeSelect')) { id = document.getElementById('changeSelect').value; if (id == 'select1') { document.getElementsByClassName('firstBox2').style.display = ""; document.getElementsByClassName('secondBox2').style.display = "none"; } else if (id == 'select2') { document.getElementsByClassName('firstBox2').style.display = "none"; document.getElementsByClassName('secondBox2').style.display = ""; } } } window.onload = requestChange; </script> <form> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>利用方法</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">初めて申し込む</option> <option value="select2">2度目以降の利用</option> </select> </td> </tr> <!-- 表示非表示切り替え --> <tr class="firstBox2"> <th>紹介者</th> <td><input type="text" /> <p>紹介された方のお名前を入力してください。</p></td> </tr> <tr class="firstBox2"> <th>紹介者のメールアドレス</th> <td><input type="text" /> <p>紹介された方のメールアドレスを入力してください。</p></td> </tr> <!-- 表示非表示切り替え --> <tr class="secondBox2"> <th>名前</th> <td><input type="text" /> <p>名前を入力してください。</p></td> </tr> <tr class="secondBox2"> <th>会員番号</th> <td><input type="text" /> <p>会員番号を入力してください。</p></td> </tr> </table> </form>

  • 自動計算の追加質問

    さきほどいただいた自動計算Scriptありがとうございました。さて英語でのサイトも作っていて、こちらの方は、29.99ドルといった小数点以下の数値を使いたいですが、うまくいきません。いただいたどのスクリプトでも、合計がおかしな数字ででてきてしまうのです。例えば以下のスクリプトで、商品サンプル１を１つ選ぶと合計は36.99であるはずなのに、36.989999999999995と出てしまうのです。 どうしたら良いでしょうか？ なにとぞよろしくお願い申し上げます。 <style type="text/css"> table {border-collapse: collapse;} table, th, td {border: 1px #808080 solid;} th, td {padding: 3px 10px;} th {background-color: #d3e9fa;} td {background-color: #ffffff;} td strong {color: #ff0000;} </style> <script> function keisan(){ var price1 = document.form1.goods1.selectedIndex * 29.99; document.form1.field1.value = price1; var price2 = document.form1.goods2.selectedIndex * 6; document.form1.field2.value = price2; var price3 = (price1 || price2) ? 7: 0; document.form1.field3.value = price3; var total = price1 + price2 + price3; document.form1.field_total.value = total; } </script> </head> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">$29.99</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field1" size="8" value="0"></td> </tr> <tr> <td>商品サンプル2</td> <td align="right">6</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field2" size="8" value="0"></td> </tr> <tr> <td>送料</td> <td align="right">$7</td> <td>　</td> <td>$<input type="text" name="field3" size="8" value="0"></td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td>$<input type="text" name="field_total" size="8" value="0"></td> </tr> </table> </form> さきほど二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで２回同じ質問を投稿してしまいました・・・。そのせいか一度目の質問は勝手に締め切りにされてしまいました。OneOneさん失礼いたしました。。

  • メールの本文に入れる言葉を選んだ物によって変更したい。

    これで本文に文字を入れられるのは分るのですが、 <a href="mailto:sample@oooindex.com?subject=お問い合わせ&body=ご記入ください">メールはこちらへ</a> メールに下で選択した商品名を自動的に入力するようにしたいです。どうすれば良いでしょうか？初心者なので、お手柔らかにお願いします。 （どんなスタイルかはこのアドレスに載っています） http://www.tagindex.com/javascript/form/comp1b.html <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <SCRIPT TYPE="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2" BGCOLOR="#FFFFFF"> <TR> <TH>商品名</TH> <TH>単価</TH> <TH>数量</TH> <TH>金額</TH> </TR> <TR> <TD>商品サンプル1</TD> <TD ALIGN="right">500円</TD> <TD><SELECT NAME="goods1" onChange="keisan()"> <OPTION>0 <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </SELECT></TD> <TD><INPUT TYPE="text" NAME="field1" SIZE="8" VALUE="0"> 円</TD> </TR> <TR> <TD>商品サンプル2</TD> <TD ALIGN="right">1,000円</TD> <TD><SELECT NAME="goods2" onChange="keisan()"> <OPTION>0 <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </SELECT></TD> <TD><INPUT TYPE="text" NAME="field2" SIZE="8" VALUE="0"> 円</TD> </TR> <TR> <TD>商品サンプル3</TD> <TD ALIGN="right">3,000円</TD> <TD><SELECT NAME="goods3" onChange="keisan()"> <OPTION>0 <OPTION>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </SELECT></TD> <TD><INPUT TYPE="text" NAME="field3" SIZE="8" VALUE="0"> 円</TD> </TR> <TR> <TD ALIGN="right" COLSPAN="3"><FONT COLOR="#FF0000"><B>合計</B></FONT></TD> <TD><INPUT TYPE="text" NAME="field_total" SIZE="8" VALUE="0"> 円</TD> </TR> </TABLE> </FORM> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • セレクトボックス　の　選択規制

    今、フォームで入力画面を作っています。 その中にセレクトボックスが４つアリ、現在「未選択」の場合エラーチェックをするようにしています。 そして、ここにもうひとつのチェックを追加したいのですが皆目見当が付きません・・・ 条件　kaikai、bunkai1、bunkai2、heikai　 全てが不参加の場合 "参加する会を最低一つは選択してください。"と言うコメントをだすというものです。 皆様よろしくお願いいたします。 ********　　現在の JavaScript　　********* <SCRIPT language="JavaScript"> <!-- //フォームチェック function fcheck() { if(document.form1.kaikai.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai1.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.bunkai2.value == "未選択") { window.alert("選択してください"); return false; } if(document.form1.heikai.value == "未選択") { window.alert("選択してください"); return false; } } //--> </SCRIPT> ********　　HTML内のフォーム　　********* <table> <tr><th>1 ( * )</th> <td> <SELECT NAME="kaikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>2 ( * )</th> <td> <SELECT NAME="bunkai1"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>3 ( * )</th> <td> <SELECT NAME="bunkai2"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> <tr><th>4 ( * )</th> <td> <SELECT NAME="heikai"> <OPTION selected VALUE="未選択">選択してください</OPTION> <OPTION VALUE="参加">参加</OPTION> <OPTION VALUE="不参加">不参加</OPTION> </SELECT></td></tr> </table>

  • セレクトボックスを使った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について書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する