- ベストアンサー
２つのセレクトボックスで選ばれた結果をテキストボックスに入れたい
フォーム内に▼次のような２つのセレクトボックスと１つのテキストボックスがあります。 お支払い方法と配送方法を選んだときにそれぞれに対応した送料をテキストボックスに入れるにはどうしたらよいでしょうか？ -------------------------------------- お支払い方法：［ 代金引換 ▼］ 配送方法： ［ 宅配便 ▼］ 送料： ［ 800円 ］ -------------------------------------- ●セレクトボックス１：お支払い方法 銀行振込、郵便振替、代金引換 ●セレクトボックス２：配送方法 郵便、宅配便 ●テキストボックス：送料 ※ユーザーが変更することはできない。 セレクト ｜セレクト ｜テキスト ボックス１｜ボックス２｜ボックス －－－－－－－－－－－－－－－－－ 銀行振込 ｜郵便 ｜200円 銀行振込 ｜宅配便 ｜600円 郵便振替 ｜郵便 ｜200円 郵便振替 ｜宅配便 ｜600円 代金引換 ｜郵便 ｜400円 代金引換 ｜宅配便 ｜800円 http://www.ueda.info.waseda.ac.jp/~gaku/js/how013.html http://www.openspc2.org/reibun/javascript/form_textfield/007/index.html 上記URLを参考に試行錯誤しているのですが期待どおりに動作しないため、こちらに投稿させていただきました。 Javascriptはかろうじて読むことは可能ですが、自分で書くことがままならいレベルです。どうぞよろしくお願いいたします。
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
このような書き方ではどうでしょうか？ *** JavaScript 部分*** function fncChgSouryou() { //銀行振込の場合 if (document.all["selectShiharai"].value == "0") { //郵便の場合 if (document.all["selectHaisou"].value == "0") { document.all["outSouryou"].value = "200"; //宅配便の場合 }else if (document.all["selectHaisou"].value == "1") { document.all["outSouryou"].value = "600"; } //郵便振替の場合 }else if (document.all["selectShiharai"].value == "1") { //郵便の場合 if (document.all["selectHaisou"].value == "0") { document.all["outSouryou"].value = "200"; //宅配便の場合 }else if (document.all["selectHaisou"].value == "1") { document.all["outSouryou"].value = "600"; } //代金引換の場合 }else if (document.all["selectShiharai"].value == "2") { //郵便の場合 if (document.all["selectHaisou"].value == "0") { document.all["outSouryou"].value = "400"; //宅配便の場合 }else if (document.all["selectHaisou"].value == "1") { document.all["outSouryou"].value = "800"; } } } *** html 部分*** <select name="selectShiharai" size="1" tabindex="0" onchange="javascript:fncChgSouryou()"> <option value="0" selected>銀行振込</option> <option value="1">郵便振替</option> <option value="2">代金引換</option> </select><br> <select name="selectHaisou" size="1" tabindex="0" onchange="javascript:fncChgSouryou()"> <option value="0" selected>郵便</option> <option value="1">宅配便</option> </select><br> <input type="text" name="outSouryou" size="10" value="200" style="text-align:right" readonly>円 JavaScript部分は上記だとかなり丁寧(?)な書き方で以下のように書くことも 可能です。 function fncChgSouryou() { if (document.all["selectShiharai"].value == "2") { if (document.all["selectHaisou"].value == "0") { document.all["outSouryou"].value = "400"; }else { document.all["outSouryou"].value = "800"; } }else { if (document.all["selectHaisou"].value == "0") { document.all["outSouryou"].value = "200"; }else { document.all["outSouryou"].value = "600"; } } } 項目名やメソッド名などはお好みで変えて下さい。
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"> <!-- var Price = [ [200,200,400],//郵便:銀行振込,郵便振替,代金引換 [600,600,800],//宅配便:銀行振込,郵便振替,代金引換 ]; function calc(f){ f.SOURYOU.value = Price[f.HAISOU.value][f.SHIHARAI.value]+"円"; } //--> </script> </head> <body> <form> <table> <tr><td>お支払い方法</td><td><select name="SHIHARAI" onchange="calc(this.form)"> <option value="0" selected>銀行振込</option> <option value="1">郵便振替</option> <option value="2">代金引換</option> </select></td></tr> <tr><td>配送方法</td><td><select name="HAISOU" onchange="calc(this.form)"> <option value="0" selected>郵便</option> <option value="1">宅配便</option> </select></td></tr> <tr><td>送料</td><td><input type="text" name="SOURYOU" size="10" value="200円" style="text-align:right" readonly></td></tr> </table> </form> </body> </html>
お礼
こんなにも短いコードで書けるとは驚きでした。おかげさまでようやく希望通りのものができました。心から感謝しております。ありがとうございました。
- m035
- ベストアンサー率44% (38/86)
>>1 IE独自のdocument.allを使うのはやめたほうがいいでしょう。 document.formのname.オブジェクトのname.value のほうが安全です。 また、formが1つなら以下のほうが簡単です。 document.forms[0].オブジェクトのname.value
お礼
ようやく希望通りのものができ、心から感謝しております。ありがとうございました。
お礼
とても参考になりました。 上記の方がわかりやすく、簡単に理解することができました。 ようやく希望通りのものができあがり大変感謝しております。ありがとうございました。