Question

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

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

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

感谢您帮助新手！

Answer 1

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

output =  Value1 + Value2 + Value3 + Value4;

到

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

<强> jsFiddle example

Answer 2

像

这样的东西

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

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

Live Demo

Answer 3

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

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

Answer 4

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

var totalValue = 0;

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

Answer 5

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

所以你的

output =  Value1 + Value2 + Value3 + Value4;

会变成

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

Answer 6

当你执行.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 个答案: