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

它可以工作，但您需要将输入字符串转换为浮点数。改变：

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”字符串转换为浮点数。像这样：

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 回答