3

次の例のように、複数の選択ボックスの入力で単一のスパン値を更新するにはどうすればよいですか。

 <html>
<head>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
            $(document).ready(function(){
                  $("#option1").change(onSelectChange);
                  $("#option2").change(onSelectChange);
          $("#option3").change(onSelectChange);
                  $("#option4").change(onSelectChange);
            });
            function onSelectChange(){

                  var Value1 = $("#option1").val();
                  var Value2 = $("#option2").val();
                  var Value3 = $("#option3").val();
                  var Value4 = $("#option4").val();
                  output =  Value1 + Value2 + Value3 + Value4;

                  $("#output").html(output);
            }
      </script>
</head>
<body>


      <select name="option1" id="option1">
            <option value="0">No Quarters</option>
            <option value=".25">1 Quarter</option>
            <option value=".50">2 Quarters</option>
            <option value=".75">3 Quarters</option>
      </select>

      <select name="option2" id="option2">
            <option value="0">No Dimes</option>
            <option value=".10">1 Dime</option>
            <option value=".20">2 Dimes</option>
      </select>

<select name="option3" id="option3">
        <option value="0">No Nickles</option>
        <option value=".05">1 Nickel</option>

</select>
<select name="option4" id="option4">
  <option value="0">No Pennies</option>
  <option value=".01">1 Penny</option>
  <option value=".02">2 Pennies</option>
  <option value=".03">3 Pennies</option>
  <option value=".04">4 Pennies</option>
</select>
<div>You have: $<span id="output">0</span></div>
</body>
</html>

アイデアは、ユーザーが自分のポケットにあるコインの数と種類を入力し、更新中にすべてのコインの合計値を確認できるというものです。選択したオプションの値を追加する方法を説明できないようです。

初心者を助けてくれてありがとう！

4

6 に答える 6

3

動作しますが、入力文字列をfloatに変換する必要があります。変化する：

output =  Value1 + Value2 + Value3 + Value4;

に

output =  parseFloat(Value1) + parseFloat(Value2) + parseFloat(Value3) + parseFloat(Value4);

jsFiddleの例

于 2013-03-19T18:43:55.933 に答える
3

何かのようなもの

 $('select').change(function(){
   output += parseFloat(this.value);
   $("#output").html(output);
});

いくつかのクラスを追加し、必要な要素のみにイベントをバインドすることをお勧めします。

ライブデモ

于 2013-03-19T18:44:57.090 に答える
2

「Value」文字列をfloatに変換する必要があります。そのようです：

output =  parseFloat(Value1) + parseFloat(Value2) + parseFloat(Value3) + parseFloat(Value4);
于 2013-03-19T18:44:17.793 に答える
2

いくつかのクラスを選択に追加すると、コードを大幅に簡素化できます: http://jsfiddle.net/Wv6Br/

var totalValue = 0;

$(".money").change(function() {
    totalValue+=Number(this.value);
    $("#output").text(totalValue);
});
于 2013-03-19T18:46:40.167 に答える
0

文字列を値として追加するのではなく、文字列を連結しているだけです。したがって、値の文字列を浮動小数点数に変換するだけで機能します。

だからあなたの

output =  Value1 + Value2 + Value3 + Value4;

になるだろう

output =  parseFloat(Value1) + parseFloat(Value2) + parseFloat(Value3) + parseFloat(Value4);
于 2013-03-19T18:45:21.900 に答える
0

そうするとき.val()は文字列を取得し、文字列を追加するとき+は加算ではなく連結を行います。値を数値に変換する必要があります。

              var Value1 = +$("#option1").val();              //unary + converts to a number
              var Value2 = +$("#option2").val();
              var Value3 = +$("#option3").val();
              var Value4 = +$("#option4").val();
              output =  Value1 + Value2 + Value3 + Value4;    //this is now addition
于 2013-03-19T18:45:57.320 に答える