使用多个选择框更新单个跨度值答案

【问题标题】：Updating a single span value with multiple select boxes使用多个选择框更新单个跨度值
【发布时间】：2013-03-08 14:52:36
【问题描述】：

如何使用多个选择框的输入更新单个跨度值，如下例所示：

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

这个想法是用户可以在他的口袋里输入硬币的数量和类型，并在他更新它们时查看所有硬币的总价值。我似乎不知道如何添加所选选项的值。

感谢您帮助新手！

【问题讨论】：

标签： jquery ajax select

【解决方案1】：

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

output =  Value1 + Value2 + Value3 + Value4;

到

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

jsFiddle example

【讨论】：

想知道为什么 parseFloat 在 .each 和 this.value jsfiddle.net/fb8gY/1 中使用时会抛出 NaN？ +1 以获得正确和快速的答案。
为什么在那个特定的例子中你需要每个？这会起作用：$('select').change(function(){ $("#output").html($(this).val()); });
添加所有选择元素的值。 parseFloat 有效，如果我们通过 $("someid").val() 就像您在回答中所做的那样。那么如果我们通过 $(this).val() 有什么问题？两者都是 jQuery 对象。
刚刚意识到var output 应该是var output = 0
是的，我意识到额外的迭代是没有用的，我讨厌 JS 的松散耦合数据类型

【解决方案2】：

您只需要将“Value”字符串转换为浮点数。像这样：

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

【讨论】：

【解决方案3】：

类似

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

最好添加一些类并将事件绑定到只需要的元素。

Live Demo

【讨论】：

【解决方案4】：

您只是将字符串连接起来，而不是将它们作为值添加。因此，您只需要将值字符串转换为浮点数即可。

所以你的

output =  Value1 + Value2 + Value3 + Value4;

会变成

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

【讨论】：

【解决方案5】：

当您执行.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

【讨论】：

这是非常有用的。我感谢您的帮助。谢谢！

【解决方案6】：

在你的选择中添加一些类，你可以大大简化代码：http://jsfiddle.net/Wv6Br/

var totalValue = 0;

$(".money").change(function() {
    totalValue+=Number(this.value);
    $("#output").text(totalValue);
});

【讨论】：

选择答案，用于简化代码。我感谢所有的回应。非常迅速、有帮助和描述性：全部。感谢您帮助我扩展学习曲线！
实际上，这在更新数量时会产生奇怪的结果。输入 1 个季度，0 个季度，然后 3 个季度：它说我有 1 美元。