【JavaScript】プルダウンで数字を選択後、即時計算したいですが
方法がわかりません。
http://bunjin.com/java/calc.html
以上のサンプルページでは、チェックボックスを押した直後、
下部のテキストボックスに金額が表示されるように設定されていますが、
チェックボックスの横などにプルダウンで数字を表示させて、
その数字の積を合計金額に表示させたいのです。
例)
「ラーメン(500円)」のチェックボックスにチェック(合計金額には「500 円」と表示)
↓
その「ラーメン(500円)」の横にプルダウンボックスを選択(値は1,2,3,・・・)
↓
選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・)
どうかよろしくお願いします。
No.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>
ありがとうございます。
思い通りの結果が出力されました。
かなり悩んでいたのですが、これならどうにか自分の満足できる成果物が出来そうです。
本当にありがとうございました。
また質問するかもしれませんが、そのときはまたよろしくお願いします。
No.1
- 回答日時:
考え方は参考サイトの方法のままでいけます。
ただし、プルダウンの場合はonclickではなくonchangeでイベントを取得するようにしておけば、値が変わったときのイベントを取得できます。
あとは、足し算に掛け算が加わるだけです。
でも数量をセレクトで入力させるのなら、チェックボックスが不要だと思うけど。(入力が2度手間では?)
セレクトボックスの初期値を0(または「---」など)にしておいて、個数が入力されたら計算するようにすれば?
この回答への補足
早速のご返答ありがとうございます。
一応チェックボックスは確かに不要なので削除しますが、
チェックボックス自体に
<input type="checkbox" value="500" onclick="calc_total()">
と、valueに"500"と付けられているため、
このチェックボックスを外してしまうとうまく作動が出来ないような気がしてならないんです。
もし、「ラーメン(500円)」と表示されている文章自体にnameやvalueを付属させることが出来れば問題は無いのですが、そのような方法もあるかどうか・・・。
もしよければそれも教えていただけないでしょうか。
質問ばかりで申し訳ないですが、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルの数式で教えてください。 1 2022/10/25 09:26
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/02 10:20
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2022/04/01 12:11
- Excel(エクセル) ユーザー定義について質問です。 2 2023/06/28 13:21
- Excel(エクセル) エクセルの数式について教えてください。 1 2023/02/11 15:17
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- Excel(エクセル) エクセルの散布図で新たに入力した値のデータラベルが空欄になる現象 1 2022/04/26 09:31
- Excel(エクセル) エクセルの数式で教えてください。 3 2022/10/25 10:52
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 2 2022/06/10 11:06
- Excel(エクセル) エクセルの書式設定について教えてください。 2 2023/02/03 09:59
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
selectを変更不可にしたい
-
検索窓とプルダウンメニュー機...
-
ラジオボタンとプルダウンを連...
-
全てのselect要素をデフォルト...
-
【JavaScript】プルダウンで数...
-
子ウインドウから親ウインドウ...
-
select要素のvalueを配列で取得...
-
javascriptでセレクトボックス...
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
selectのすべての値を送信する方法
-
プルダウンメニューに連動する...
-
<input>の選択肢をプルダウンメ...
-
スマホのフォームでのselect複...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
セレクトボタンで特定の項目で...
-
return falseが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報