Javascript onchange for select work仅适用于php循环中的第一项

时间:2018-04-11 11:49:32

标签: javascript php loops

我有一个带有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>

1 个答案:

答案 0 :(得分:-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>