用於選擇工作的Javascript onchange僅適用於php循環中的第一項

Question

我有一個帶有javascript onchange =“ update_price（this）”的HTML選擇，但是它在php中的while循環下，這意味着我可以根據要循環的項目數進行選擇。 每個選擇的項目都應該為每個項目提供特定的值，但是，javascript僅返回選擇的第一個項目，而忽略其他項目。

我了解到id不能在循環中起作用，有人可以對此進行說明還是提供適當的解決方案

這是我的代碼。

我的PHP

<?php foreach($_SESSION['product_cart'] as $data){
          //    $sum+= $data;

          $total_price += $data['price'];  //total credit unit
          $total_fee += $data['coursefee'];  //total fee
            ?>
              <li style="  margin: 10px 10px;">
                  <span class="item">
                    <span class="item-left" style="color:#0000" >
                        <img src="upload/<?php echo $data['image']; ?>" alt="" style="width:70px;" />
                        <span class="item-info" style="color:#000;display: inline-block;" >
                            <span><?php echo $data['title']; ?></span>
                            <span>
                              <div class="form-group ">
                <select  name="enrolledterm[]" data-placeholder="Select term..." class="chosen-select" multiple tabindex="4" onchange="update_price(this)" id="dropdown">
               <option><?php echo $data['term']; ?></option>
                </select>
              </div>



            </span> 
         Credit Unit :  <input type="text" id="totaldiscount"  readonly="readonly" name="creditcharged" readonly="readonly" /><br>
        Credit Unit :  <input type="text" id="totaldiscount2"  readonly="readonly" name="creditcharged" readonly="readonly" />               </span>
                    </span>
                    <span class="item-right">
                        <button class="btn btn-xs btn-danger pull-right" onclick="remove_cart('<?php echo $data['p_id']; ?>')" >x</button>
                    </span>
                </span>
              </li>
          <?php   } ?>

下面是我的JavaScript

     <script type="text/javascript">
function update_price(e) {
  var price = 0;                          
  $('option:selected', $(e)).each(function() {
    console.log($(this).data('price'));
    // sum price for selected items
    price += $(this).data('price') ;
  });
  $('#total').val(price);

   if ($('option:selected').length == 3){
     discountprice = price - (price * <?php echo ($data['discount'] * 0.01); ?>);
      $('#totaldiscount').val(discountprice);
    } else { discountprice = price;
     $('#totaldiscount').val(discountprice);  }

      discountprice = price;
     $('#totaldiscount2').val(discountprice);
}
</script>

Answer 1

<?php foreach($_SESSION['product_cart'] as $data){
          //    $sum+= $data;

          $total_price += $data['price'];  //total credit unit
          $total_fee += $data['coursefee'];  //total fee
            ?>
              <li style="  margin: 10px 10px;">
                  <span class="item">
                    <span class="item-left" style="color:#0000" >
                        <img src="upload/<?php echo $data['image']; ?>" alt="" style="width:70px;" />
                        <span class="item-info" style="color:#000;display: inline-block;" >
                            <span><?php echo $data['title']; ?></span>
                            <span>
                              <div class="form-group ">
                <select  name="enrolledterm[]" data-placeholder="Select term..." class="chosen-select" multiple tabindex="4" id="dropdown">
               <option><?php echo $data['term']; ?></option>
                </select>
              </div>



            </span> 
         Credit Unit :  <input type="text" id="totaldiscount"  readonly="readonly" name="creditcharged" readonly="readonly" /><br>
        Credit Unit :  <input type="text" id="totaldiscount2"  readonly="readonly" name="creditcharged" readonly="readonly" />               </span>
                    </span>
                    <span class="item-right">
                        <button class="btn btn-xs btn-danger pull-right" onclick="remove_cart('<?php echo $data['p_id']; ?>')" >x</button>
                    </span>
                </span>
              </li>
          <?php   } ?>

使用這個JavaScript

 <script type="text/javascript">
    function update_price(e) {
      var price = 0;                          
      $('option:selected', $(e)).each(function() {
        console.log($(this).data('price'));
        // sum price for selected items
        price += $(this).data('price') ;
      });
      $('#total').val(price);

       if ($('option:selected').length == 3){
         discountprice = price - (price * <?php echo ($data['discount'] * 0.01); ?>);
          $('#totaldiscount').val(discountprice);
        } else { discountprice = price;
         $('#totaldiscount').val(discountprice);  }

          discountprice = price;
         $('#totaldiscount2').val(discountprice);
    }

$('#dropdown').on('change',function(){
  update_price(this);
})
</script>