jquery - 使用 jQuery 获取选择标签的值

Question

我怎么能做到以下几点：

<script type="text/javascript">
    $("button").click(function() {
         var sum = 0;

         $("select").each(function() {
           sum += parseInt(this.value);
        });

       alert(sum);
    });
</script>
<?php
     for($i=0;$i<50;$i++) {
         echo "<div>
                  <select>";

         for($x=1;$x<5;$x++) {
             echo "<option value='".$x."'>".$x."</option>";
         }

         echo "</select>
               </div>";
     }
 ?>
 <button>Submit</button>

客户端将能够相应地编辑每个选择标签。我怎样才能使它在单击按钮时返回每个用户选择的总和？

Answer 1

您的代码有效。你只需要用 $(function(){...}) 包装你的 javascript：

$(function(){
  $("button").click(function() {
     var sum = 0;

     $("select").each(function() {
       sum += parseInt(this.value);
    });

   alert(sum);
  }); 
});

Answer 2

你几乎在那里。2个变化：

1. 将您的按钮单击 Javascript 包装在$(function() {和之间});：

   $(function() {
       $("button").click(function() {
           var sum = 0;
   
           $("select").each(function() {
               sum += parseInt(this.value);
           });
   
           alert(sum);
       });
   });
   

   以便在文档准备好/按钮实际存在之后才注册单击处理程序（在此处详细说明）。

2. 您可能还想更改：

   sum += parseInt(this.value);
   

   至

   sum += parseInt($(this).val());
   

   以便 jQuery 处理一些跨浏览器的东西。

工作演示：在 JSFiddle

编辑：当然，请确保在使用之前包含 jQuery！jQuery 是如何工作的