２つのセレクトボックスで選ばれた結果をテキストボックスに入れたい

Question

フォーム内に▼次のような２つのセレクトボックスと１つのテキストボックスがあります。
お支払い方法と配送方法を選んだときにそれぞれに対応した送料をテキストボックスに入れるにはどうしたらよいでしょうか？

--------------------------------------
お支払い方法：［　代金引換　▼］
配送方法：　　［　宅配便　　▼］
送料：　　　　［　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はかろうじて読むことは可能ですが、自分で書くことがままならいレベルです。どうぞよろしくお願いいたします。

coboler · Accepted Answer

このような書き方ではどうでしょうか？ *** 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 部分***

円 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"; } } } 項目名やメソッド名などはお好みで変えて下さい。

BLUEPIXY · Answer

<!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">

</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 · Answer

>>1
IE独自のdocument.allを使うのはやめたほうがいいでしょう。
document.formのname.オブジェクトのname.value
のほうが安全です。
また、formが1つなら以下のほうが簡単です。
document.forms[0].オブジェクトのname.value

２つのセレクトボックスで選ばれた結果をテキストボックスに入れたい

このような書き方ではどうでしょうか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

>>1

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング