Javascript onchange for select仅在php循环的第一项上工作

我有一个带有javascript onchange=“update_price（this）”的HTML select，但它在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   } ?>

“alt=”“style=”宽度：70px；" />
学分单位：

信贷单位：
);
$（“#总折扣”）.val（折扣价格）；
}否则{折扣价格=价格；
$（“#总折扣”）.val（折扣价格）；}
折扣价格=价格；
$（#totaldiscount2'）.val（折扣价格）；
}

“alt=”“style=“宽度：70px；”/>
学分单位：

信贷单位：
);
$（“#总折扣”）.val（折扣价格）；
}否则{折扣价格=价格；
$（“#总折扣”）.val（折扣价格）；}
折扣价格=价格；
$（#totaldiscount2'）.val（折扣价格）；
}
$（'#下拉列表'）。在（'change'，function（）上{
更新价格（本）；
})

，特别是当您尝试与这些元素交互时，它会在和CSS中造成问题。解释您更改了什么以及为什么更改会很有帮助，OP很可能只是复制粘贴而没有学到任何东西。我尝试了粘贴，但它不起作用，请解释所做的更改，这样我们都可以了解我添加了$（“#dropdown'）。on（'change'，function（）{update_price（this）；}）如果这不起作用，请尝试使用$（document）。在（'change'，'#dropdown'，function（）{update_price（this）；}）上，您使用的是内联代码，这是一个非常古老的过程。@PoornaRao，谢谢，这是一个进步，第一个选择只起作用，而其他选择根本不起作用

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

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

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