• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：【JavaScript】プルダウンで数字を選択後、即時計算したいですが）

【JavaScript】プルダウンで数字を選択後、即時計算する方法とは？

このQ&Aのポイント
  • プルダウンで数字を選択した後、即時計算する方法を知りたいです。
  • サンプルページでは、チェックボックスを押すと金額が表示されますが、プルダウンを使った計算方法はわかりません。
  • 具体的には、ラーメンの価格を表示するチェックボックスの横にプルダウンボックスを追加し、選んだ価格に応じて合計金額を表示したいです。
回答 全件
ベストアンサー
最終的にどのような構造になるのか不明なので、よくわかりませんが… ご…
考え方は参考サイトの方法のままでいけます。 ただし、プルダウンの場合…

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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>

koucha714
質問者

お礼

ありがとうございます。 思い通りの結果が出力されました。 かなり悩んでいたのですが、これならどうにか自分の満足できる成果物が出来そうです。 本当にありがとうございました。 また質問するかもしれませんが、そのときはまたよろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

考え方は参考サイトの方法のままでいけます。 ただし、プルダウンの場合はonclickではなくonchangeでイベントを取得するようにしておけば、値が変わったときのイベントを取得できます。 あとは、足し算に掛け算が加わるだけです。 でも数量をセレクトで入力させるのなら、チェックボックスが不要だと思うけど。（入力が2度手間では？） セレクトボックスの初期値を0（または「---」など）にしておいて、個数が入力されたら計算するようにすれば？

koucha714
質問者

補足

早速のご返答ありがとうございます。 一応チェックボックスは確かに不要なので削除しますが、 チェックボックス自体に <input type="checkbox" value="500" onclick="calc_total()"> と、valueに"500"と付けられているため、 このチェックボックスを外してしまうとうまく作動が出来ないような気がしてならないんです。 もし、「ラーメン（５００円）」と表示されている文章自体にnameやvalueを付属させることが出来れば問題は無いのですが、そのような方法もあるかどうか・・・。 もしよければそれも教えていただけないでしょうか。 質問ばかりで申し訳ないですが、よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンで選択された値を計算し送信

    １～５の数字を選択するプルダウンメニュー$aformと、６～９を選択するプルダウンメニュー$bformがあり、投稿ボタンがひとつあるフォームを作りました。 $aformプルダウンで選択された値を×10にし、$bformプルダウンで選択された値に足して、投稿ボタンを押すとその値が変数に格納され、保存画面で数値が確認できるようにしたいのですが、投稿ボタンを押して一度保存をしても数値は0のままで計算されていないのですが、再度、投稿画面に戻り投稿を押すと計算がされてちゃんと結果が表示されます。ということは、計算するまでの流れは出来ていると思うのですが、なぜ一度で表示できないのかがわかりません。どういう可能性があるのか、もしくはズバリというものを教えていただけないでしょうか？ <{assign var="a_suji" value=$aform*100}> <{assign var="kekka" value=$a_suji+$bform}> <input type="hidden" name="ymcount" value="<{$kekka}>" />

  • プルダウンメニューなどの矢印が全て数字になって困ってます

    普通にPCは起動するんですが、なぜか、プルダウンメニューなどの矢印が 全て数字になっています。 あと、最近はチェックボックスのチェックするところも満足に表示しなくなりました。 原因がわからないので教えてください。

  • プルダウンのボタンに数字が出てしまいます

    プルダウンメニューのボタンや最小化、最大化、閉じるボタンにそれぞれの記号（マーク）でなく、数字が表示されてしまうようになりました。チェックボックスも変な記号のようなものが表示されます。その他の表示は大丈夫で、通常の使用には問題ないのですが、解決法はないでしょうか。ご存知の方がいらしたら教えてください。OSはwin98です。

  • 検索&計算フォームを作りたい。

    検索&計算フォームを作っていたのですが煮詰まってしまいました。 検索では、プルダウンを使って５つのCSVから１つ選び、その選ばれたCSVの中の1行を 表示させる。 プルダウンは5つの選択肢があり、その5つにそれぞれに子の選択肢がある。 その子の選択肢はCSVの行と連動？している状態にしたい。 （例） AU▽ X-RAY▽ ｜検索｜ 結果 AU X-RAY 10000円 計算では、その表示された行に書かれている数字をプルダウンとチェックボックスで計算する。 というものです。 計算式は　(CSVで検出された金額×プルダウン)－チェックボックス＝値段 （例） AU X-RAY 10000円 S▽ □箱なし □傷あり ｜計算｜ AU X-RAY 8000円 検索フォームはCSVが1つだけなら何とかできたのですが、複数にするにはどうすればいいのか、 わからなくなってしまいました。 fgetcsvで試してみたんですがうまくいきません。 どうか、どなたかご鞭撻宜しくお願いします。

    • 締切済み
    • PHP
  • 選択した数字からランダムに数字を発生させるにはどうしたらよいでしょうか

    途中までいろいろ調べていたのですが、行き詰まってしまいました・・。 エクセルを使って行いたいのですが、 たとえば、１～３０までの数字があって、その中で１０個選択して、 その選択した数字の中から、３個ランダムに数字を発生させたいのですが、どのような式やマクロを組んだらよいでしょうか？ 「表示 － ツールバー － フォーム」のチェックボックスで選択をするようにしたいです。 わかりにくい質問でスイマセンが、ご回答よろしくお願い致します。

  • 【javascript・PHP】プルダウン選択後、表示する金額を瞬時に

    【javascript・PHP】プルダウン選択後、表示する金額を瞬時に変更する方法。 大変困っております。 今回はjavascriptとPHPを組み合わせたコーディングを行おうとしているのですが、 プルダウンを選択した直後、どれを選択したかにより、phpの関数「$price」に代入する値を変えるような仕様に変更したいのです。更に、その$priceに入れる値はデータベースで入力した金額を反映させたいのですが、うまくいきません。 かなり分かりづらいのですが、以下に一連の流れの例を記入します。 例） ----------------------------------------------------------- データベースの二つのテーブルがあり、 一つのテーブル(priceとします)の列には「price_A」と「price_B」というデータが、 もう一つのテーブルの列(dealerとします)には「店名」があります。 プルダウンに表示する内容はdealerテーブルの「店名」列に格納されている「A店」と「B店」を表示させます（データベースから取得し、プルダウンに反映） ここで、プルダウンで「A店」を選択すると、phpの関数（$price）にpriceテーブルの「price_A」の金額を代入し、 「B店」の選択すると、$priceに「price_B」の金額を代入します。 ----------------------------------------------------------- そして以下は現在記入しているjavascriptの問題である箇所を抜粋しました。 確実に間違いがあるのは分かっていますが、できればその解決策の伝授をお願いします。 ※PHP文内に書いているので、echoを使用しています。 <?php echo '<script type="text/javascript">'; echo 'function check1() {'; echo 'var a;'; echo 'a = document.myform.dealer.value;'; echo 'if (a == "問屋A") {'; $price = $row["dealerA_price"];　　// 要改善1 echo '} else if (a == "問屋B") {'; $price = $row["dealerB_price"];　　// 要改善2 echo '} } </script>'; ?> どうかよろしくお願いします。不明な点は随時補足にて記述させていただきます。

  • javascriptを活用して、プルダウンメニューにて選択、登録された

    javascriptを活用して、プルダウンメニューにて選択、登録された値は上部に表示及びhiddenに値を代入したいのですが、いまいちわかりません。 例 下記で選択された場合 選択された値をここに表示＋<input type="hidden" value="ここに選択された値"> <SELECT name="name"> <OPTION value="tarou">太郎</OPTION> <OPTION value="hanako">花子</OPTION> <OPTION value="saburou">三郎</OPTION> </SELECT> <A href="" onclick="">決定</A> しかも、選択した後にさらに選択して決定を押下することで 選択された値をつみかせねて表示したいのですが、 どなたかご教授して頂けないでしょうか？

  • プルダウンで選択した値しか投入できないようにしたい

    アクセス２０１０です。 テーブルのフィールド１の値は、 1 2 3 の３つの値しか入力できないようにしたいです。 そして、その３つの値はプルダウンで選択したいです。 それをするにはどうすればいいでしょうか？ 入力規則を使えばできるかな？と思い、デザインの入力規則の右側のボタンをクリックしたら 式ビルダーというのが出ましたが、どういう式を作ればいいのかわかりません。 もしくは、ルックアップでコンボボックスを選択すればいいのでしょうか？ しかし、値集合ソースに何を入れればいいのかわかりません。 よろしくお願いします。

  • プルダウンメニューからチェックボックスを表示したい

    php、javascript、mysqlを使用し、プルダウンで選択後、チェックボックスを表示させる仕組みを作りたいのですが、 どうすればよいのか分かりません。 どなたか力を貸して頂きたく思います。 例えば下記のようなTBLがあったとします。 ■TBL：oya 　oyaコード 　10 　20 　30 ■TBL：ko 　oyaコード　　　　koコード 　10　　　　　　　　1100 　10　　　　　　　　1200 　10　　　　　　　　1300 　20　　　　　　　　2100 　20　　　　　　　　2200 　30　　　　　　　　3100 TBL　「oya」　をプルダウンメニューにセット。 プルダウンメニューを選択する度にTBL　「ko」を呼び出し、同ページ内にチェックボックスとして表示させたいと考えています。 例） ・10が選択されたら 　「1100」、「1200」、「1300」のチェックボックスを表示する プルダウンメニューへのセットは出来たのですが、プルダウン選択後の「ko」を呼び出す箇所が分かりません。 php　Mysql　javascript　で実現したいと考えております。 サンプルページでもいいですので、何かありましたら教えて下さい。 お分かりになる方よろしくお願いいたします。

  • エクセルで家計簿のようにプルダウンメニューの項目の数字を計算したい

    エクセルで家計簿のようにプルダウンメニューの項目の数字を計算したい わからないのでご教授をお願いします。 エクセルで家計簿を作っています。 その中で、次のような計算をしたいと思っています。 （記号はセルの番号と理解してください。） ・A1にプルダウンメニューを作り、A口座又はB口座を選択し、B1に入金された金額を入れる。 ・C１にはA口座の残額、D1にはB口座の残額が記載されている。 ・例えば、A1でA口座を選び、B１にはそこには100円入金があったことを記載する。 ・そうすると、C1に書いてあるA口座の残額が100円増える。 という感じです。 プルダウンメニューで選んだ口座によってどちらかの口座の残額が変動するようにするための方法を 教えてください。

ドライブインストールしても印刷できない
このQ&Aのポイント
  • ドライブインストールしても印刷できない状態です。対応方法を教えてください。
  • ドライブインストール後に印刷ができない問題について相談です。
  • DCP-J525Nのドライブインストール後、なぜか印刷ができません。解決策をお知らせください。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する