- ベストアンサー
【JavaScript】プルダウンで数字を選択後、即時計算する方法とは？
- プルダウンで数字を選択した後、即時計算する方法を知りたいです。
- サンプルページでは、チェックボックスを押すと金額が表示されますが、プルダウンを使った計算方法はわかりません。
- 具体的には、ラーメンの価格を表示するチェックボックスの横にプルダウンボックスを追加し、選んだ価格に応じて合計金額を表示したいです。
- koucha714
- お礼率75% (21/28)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
最終的にどのような構造になるのか不明なので、よくわかりませんが… ご参考まで。 （マークアップがリストがよいのか表がよいのかわかりませんが、とりあえずリストで…） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> form#form1 ul { list-style-type:none; margin:0; padding:0; } form#form1 span { display:inline-block; width:10em; } form#form1 select { width:4em; } form#form1 div { margin-top:0.8em; } form#form1 div input { width:6em; } </style> <script type="text/javascript"> <!-- function calc(e) { var i = 0, total = 0, str, elm = e.form.elements; while (e = elm[i++]) { if (e.nodeName == "SELECT" && e.value != "0") { str = e.previousSibling; while (str && str.nodeName != "SPAN") str = str.previousSibling; str = str?str.firstChild.nodeValue:"no"; str = Number(str.replace(/^.+[(（]([0-9]+)円[)）]$/,"$1")); if (!isNaN(str)) total += +str * e.value; } } elm["goukei"].value = total == 0?"":total;; } //--> </script> </head> <body> <form id="form1"> <ul> <li><span>ラーメン（500円）</span> <select name="s1" onchange="calc(this)"> <option value="0" selected>-- <option value="1">1 <option value="2">2 <option value="3">3 </select> </li> <li><span>チャーハン（600円）</span> <select name="s2" onchange="calc(this)"> <option value="0" selected>-- <option value="1">1 <option value="2">2 <option value="3">3 </select> </li> <li><span>酢豚（700円）</span> <select name="s3" onchange="calc(this)"> <option value="0" selected>-- <option value="1">1 <option value="2">2 <option value="3">3 </select> </li> </ul> <div><span>合計金額：</span> <input type="text" name="goukei" readonly value="">円 </div> </form> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
考え方は参考サイトの方法のままでいけます。 ただし、プルダウンの場合はonclickではなくonchangeでイベントを取得するようにしておけば、値が変わったときのイベントを取得できます。 あとは、足し算に掛け算が加わるだけです。 でも数量をセレクトで入力させるのなら、チェックボックスが不要だと思うけど。（入力が2度手間では？） セレクトボックスの初期値を0（または「---」など）にしておいて、個数が入力されたら計算するようにすれば？
補足
早速のご返答ありがとうございます。 一応チェックボックスは確かに不要なので削除しますが、 チェックボックス自体に <input type="checkbox" value="500" onclick="calc_total()"> と、valueに"500"と付けられているため、 このチェックボックスを外してしまうとうまく作動が出来ないような気がしてならないんです。 もし、「ラーメン（５００円）」と表示されている文章自体にnameやvalueを付属させることが出来れば問題は無いのですが、そのような方法もあるかどうか・・・。 もしよければそれも教えていただけないでしょうか。 質問ばかりで申し訳ないですが、よろしくお願いします。
お礼
ありがとうございます。 思い通りの結果が出力されました。 かなり悩んでいたのですが、これならどうにか自分の満足できる成果物が出来そうです。 本当にありがとうございました。 また質問するかもしれませんが、そのときはまたよろしくお願いします。