如何使用onChange函数获取下拉列表的值和id并通过ajax

Question

I am new to JavaScript and ajax and I am setting up a cart and I need to get the id of the select tag and the value of the option selected, and pass through ajax. id is dynamically created because data is coming from DB

I have tried this, but issue is this works well for the first row of the data but not for all because of the "id"

<script type="text/javascript">

    var subtotal = 0, 
    adult_price = 0, 
    kid_price = 0;

    $('#adult_quantity').change(function() {
        // Remove any previously set values
        $('#subtotal, #total_box').empty();
        $(this).find('option:selected').each(function() {
            // Check that the attribute exist, so that any unset values won't bother
            if ($(this).attr('value')) {            
                adult_price = $(this).data('price');
                var span_Text = document.getElementById("adult-price").innerText;
                adult_price = adult_price * span_Text;
                subtotal = adult_price + kid_price;
                $('#subtotal').append( subtotal);
            }
        });
    });

    $('#kids_quantity').change(function() {
        // Remove any previously set values
        $('#subtotal, #total_box').empty();
        $(this).find('option:selected').each(function() {
            // Check that the attribute exist, so that any unset values won't bother
            if ($(this).attr('value')) {            
                kid_price = $(this).data('price');
                var span_Text = document.getElementById("kids-price").innerText;
                kid_price = kid_price * span_Text;          
                subtotal = adult_price + kid_price;
                $('#subtotal').append( subtotal);
            }
        });    
    });
</script>

I have this code is from cart.php

<tr id="package_row">
   <td>
      <?php echo "<b><strong>".$row["subpackage_name"].": </strong></b>"; ?>
      <?php echo $row["subpackage_detail"]; ?>
   </td>
   <td>
      <b>Adults</b>
      <select name="adult_quantity" <?php echo "id=adult_quantity".$increment; ?> onchange="getPrice(this.value)" >
         <?php 
            for($i = 0; $i<51; $i++)
            { ?>
         <option data-price=<?php echo $i; ?> value=<?php echo $i; ?>><?php echo $i; ?></option>
         <?php  } ?>
      </select>
      <br/>
      Price: <span <?php echo "id=adult-price".$increment; ?>><?php echo $row["subpackage_adult_price"]; ?></span>
      <b>Kids</b>
      <select name="kids_quantity" <?php echo "id=kids_quantity".$increment; ?> onchange="getPrice(this.value)">
         <?php 
            for($i = 0; $i<51; $i++)
            { ?>
         <option data-price=<?php echo $i; ?> value="$i"><?php echo $i; ?></option>
         <?php  } ?>
      </select>
      <br/>
      Price: <span <?php echo "id=kids-price".$increment; ?> ><?php echo $row["subpackage_kids_price"]; ?></span>
   </td>
   <td><input type="date"/></td>
   <td><span <?php echo "id=subtotal".$increment; ?>></td>
   <td><a ><span class="icon-remove" id="delete"></span></a></td>
</tr>

Answer 1

UpdateSubtotal();

// populate the adult quantity
$(".adultQuantity").each(function() {
  var contents;
  for (var i = 0; i < 51; i++) {
    contents += "<option data-price=" + i + " value= " + i + ">"+i+"</option>";
  }
  $(this).html(contents);  
});

// populate the child quantity
$(".childQuantity").each(function() {
  var contents;
  for (var i = 0; i < 51; i++) {
    contents += "<option data-price=" + i + " value= " + i + ">"+i+"</option>";
  }
  $(this).html(contents);
});

// get the price for the amount of the item requested
$("body").on("change", ".adultQuantity", function() {
  var quantity = $(this).children("option:selected").val(); // how many
  var priceCalc = $(this).closest("td").find(".adultPrice").html(); // price per item
  var price = parseInt(quantity) * parseFloat(priceCalc); // subtotal per item, this can be hidden  
  var adultSubTotal = $(this).closest("td").find(".adultSubtotal").html(price); // subtotal 
  UpdateSubtotal(); // update the row subtotal
});

// get the price for the amount of the item requested
$("body").on("change", ".childQuantity", function() {
  var quantity = $(this).children("option:selected").val(); // how many
  var priceCalc = $(this).closest("td").find(".childPrice").html(); // price per item
  var price = parseInt(quantity) * parseFloat(priceCalc); // subtotal per item, this can be hidden  
  var adultSubTotal = $(this).closest("td").find(".childSubtotal").html(price); // subtotal  
  UpdateSubtotal(); // update the row subtotal
});

// UPDATE THE MAIN SUBTOTAL
function UpdateSubtotal(){

  var subtotal = 0;
  
  $(".adultQuantity").each(function() {
   subtotal += parseFloat($(this).closest("td").find(".adultSubtotal").html());
  });
  
  $(".childQuantity").each(function() {
   subtotal += parseFloat($(this).closest("td").find(".childSubtotal").html());
  });
  
  $(".subtotal").html(subtotal); // update subtotal text
  
}

td {
  border-collapse: collapse;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
  <tr id="package_row">
    <td>
      <b><strong>subpackage name</strong></b>
      <br>
      subpackage_detail
    </td>

    <td>
      <!-- ---------------------------------------------------------------------------- -->
      <b>Adults</b>
      <select name="adult_quantity" class="adultQuantity"></select>
      <br/> Price:
      <span class='adultPrice'>500</span>
      <br> SubTotal:
      <span class='adultSubtotal'>0</span>
      <!-- ---------------------------------------------------------------------------- -->
      <br><hr>
      <b>Kids</b>
      <select name="child_quantity" class="childQuantity"></select>
      <br/> Price:
      <span class='childPrice'>200</span>
      <br> SubTotal:
      <span class='childSubtotal'>0</span>
      <!-- ---------------------------------------------------------------------------- -->
    </td>

    <td><input type="date" /></td>
    <td><span class=subtotal>0</span></td>
    <td><a><span class="icon-remove" id="delete">DEL</span></a></td>
  </tr>
</table>

If you have more than 1 row with the same id then you will only get one row working.

Also, for dynamic data you should use the jQuery On function.

change

$('#adult_quantity').change(function() {

to

$("body").on("change", "#adult_quantity", function(){ // function stuff here. });

</div>