【JavaScript】プルダウンで数字を選択後、即時計算したいですが

解決済

質問者：koucha714
質問日時：2010/06/25 11:34
回答数：2件

【JavaScript】プルダウンで数字を選択後、即時計算したいですが
方法がわかりません。

http://bunjin.com/java/calc.html

以上のサンプルページでは、チェックボックスを押した直後、
下部のテキストボックスに金額が表示されるように設定されていますが、
チェックボックスの横などにプルダウンで数字を表示させて、
その数字の積を合計金額に表示させたいのです。

例）
「ラーメン（５００円）」のチェックボックスにチェック（合計金額には「500　円」と表示）
↓
その「ラーメン（５００円）」の横にプルダウンボックスを選択(値は1,2,3,・・・)
↓
選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・)

どうかよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2010/06/25 17:22

最終的にどのような構造になるのか不明なので、よくわかりませんが…

ご参考まで。
（マークアップがリストがよいのか表がよいのかわかりませんが、とりあえずリストで…）

<!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">

</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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
思い通りの結果が出力されました。

かなり悩んでいたのですが、これならどうにか自分の満足できる成果物が出来そうです。
本当にありがとうございました。

また質問するかもしれませんが、そのときはまたよろしくお願いします。

通報する

お礼日時：2010/06/25 17:28

No.1

回答者： fujillin
回答日時：2010/06/25 12:44

考え方は参考サイトの方法のままでいけます。

ただし、プルダウンの場合はonclickではなくonchangeでイベントを取得するようにしておけば、値が変わったときのイベントを取得できます。
あとは、足し算に掛け算が加わるだけです。

でも数量をセレクトで入力させるのなら、チェックボックスが不要だと思うけど。（入力が2度手間では？）
セレクトボックスの初期値を0（または「---」など）にしておいて、個数が入力されたら計算するようにすれば？

この回答への補足

早速のご返答ありがとうございます。
一応チェックボックスは確かに不要なので削除しますが、
チェックボックス自体に

<input type="checkbox" value="500" onclick="calc_total()">

と、valueに"500"と付けられているため、
このチェックボックスを外してしまうとうまく作動が出来ないような気がしてならないんです。

もし、「ラーメン（５００円）」と表示されている文章自体にnameやvalueを付属させることが出来れば問題は無いのですが、そのような方法もあるかどうか・・・。

もしよければそれも教えていただけないでしょうか。
質問ばかりで申し訳ないですが、よろしくお願いします。

補足日時：2010/06/25 14:37

通報する