onchange仅适用于表中的第一行

Question

Am selecting an item from a select-option tag in a table to populate records from a database to fill another select-option tag, but unfortunately, it only works for the first table row. When I add another table row with jquery, it does not work in the new added table row.

The HTML table

<table class="table table-bordered table-hover">
    <thead>
        <tr>
        <th width="2%"><input id="check_all" type="checkbox"/></th>
        <th width="10%">Credit Type</th>
        <th width="20%">Credit Account</th>
        <th width="15%">Fund</th>
        <th width="15%">Amount</th>
        </tr>
        </thead>
        <tbody>
         <tr>
            <td><input class="case" type="checkbox"/></td>
           <td>
             <select name="fund_id" class="form control" id="type_1">
             <option></option>
             <option value="23">Expense</option>
             <option value="3">Fixed Asset</option>
             <option value="8">Current Asset</option>
             <option value="5">Current Liability</option>
            <option value="4">Non-Current Liability</option>                                    
            </select>
          </td>
          <td>
            <select id="credit_1" name="cr_ac" class="form-control" >
             <option></option>
            </select>
         </td>
         <td> <input type="text" name="fund[]" id="fund_1" ></td>
         <td><input type="text"  name="amount[]" id="amount_1"></td>
      </tr>
     </tbody>
    </table>

The script that add new row to table

<script>
    var i=$('table tr').length;
    $(".addmore").on('click',function(){
        html = '<tr>';
        html += '<td><input class="case" type="checkbox"/></td>';
        html += '<td><select name="fund_id" class="form-control" id="type_'+i+'"><option></option><option value="23">Expense</option><option value="3">Fixed Asset</option><option value="8">Current Asset</option><option value="5">Current Liability</option><option value="4">Non-Current Liability</option></select></td>';
        html += '<td><select id="credit_'+i+'" name="cr_ac" class="form-control" ><option></option></select></td>';
        html += '<td><input type="text" name="fund[]" id="fund_'+i+'"></td>';
        html += '<td><input type="text" name="amount[]" id="amount_'+i+'"></td>';
       html += '</tr>';
        $('table').append(html);
        i++;
    });
</script>

The onchange function with ajax

<script>
for (var i = 1; i < 2; i++) {

    (function(i) {

       $(document).ready(function(){

          $("#type_"+i).change(function(){

            var id=$("#type_"+i).val();
            var dataString = 'id='+ id;

            $.ajax({
                   type: "POST",
                   url: "populate_debit_type.php",
                   data: dataString,
                   cache: false,
                   success: function(html){

                          $("#credit_"+i).html(html);
                   } 
            });

          });

       });

    })(i);

}
</script>

The PHP script that fetch the db records

<?php

include "includes/kon/db_connect.php";

    $id = $_POST['id'];
    // query for options based on value
    $sql = $link->query("SELECT * FROM accounts WHERE parent_id = '$id' OR ext_parent = '$id'");
    while($row = mysqli_fetch_array($sql)) {

       echo '<option value="'.$row['account_code'].'">'.$row['account_name'].'</option>';

   }
?>

Thanks

Answer 1

Because you registered the change event before you dynamically create & inject the new rows. So the code you registered for the change event is only applicable to the items present in the page during your event registration. It won't work for future(dynamically injected to DOM) elements.

For current and future elements to work, you should use jQuery on delegation.

When you add a new row, give a css class name to your select element.

$(".addmore").on('click',function(){
    //existing code
    html+= '<td><select class="form-control mySelect" id="type_'+i+'">'
});

and use this new css class as your jQuery selector to register the change event code using jQuery on method. Also in the success event on your ajax call to get the data for the second dropdown, you should use the closest() method to get a reference of the parent tr and use find() method to get a reference to the second dropdown.

$(function(){

   $(document).on("change",".mySelect",function(e){
      e.preventDefault();
      var _this=$(this);
      // use _this, which is jQuery object of the dropdown user changed
      var id =_this.val();

     //Get the second dropdown
     var _crac=_this.closest("tr").find("select[name='cr_ac']");

     $.ajax({
            type: "POST",
            url: "populate_debit_type.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
               _crac.html(html);
           } 
      });

   });

});