从选择框数组获取数据属性

Question

我有一个帐户表单，其中所有帐户都从mysql数据库中拉到了下拉菜单中。 用户从下拉菜单中选择帐户，然后通过data-acc属性自动填充帐户代码字段。 我添加了一个按钮以添加更多帐户。

它适用于第一组输入和选择框，但不适用于下一组

截图示例

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script> $('select[name="account_name[]').change(function() { $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc')); }); </script> <script> $(document).ready(function(){ var i=1; var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>'; $('#add').click(function(){ i++; $('#dynamic_field').append(chart_add); $('.selectpicker').selectpicker('render'); }); $(document).on('click', '.remove_chart', function(){ var button_id = $(this).attr("id"); $('#row_chart'+button_id+'').remove(); }); }); </script> 

 <div class="row"> <div class="col-md-12"> <div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Report Per Office</h3> </div> <div class="box-body"> <div class="col-md-12"> <h4>Project Procurement Management Plan (PPMP) <hr > </div> <div class="col-md-1"> Office: </div> <div class="col-md-4"> <select class="selectpicker" data-live-search="true" name="office_from" data-width="auto" required > <option>--Select Reponsible Office--</option> <?php $q = "SELECT * FROM `office_code_dept`"; $r = mysqli_query($conn,$q); while($row = mysqli_fetch_assoc($r)){ $off_desc = $row['off_name']; ?> <option value="<?php echo $off_desc;?>"><?php echo $off_desc; ?></option> <?php } ?> </select> </div> <div class="col-md-1">Year:</div> <div class="col-md-4"><input type="number" min="1990" max="3000" name="tax_year" class="form-control" style="text-align: center;" value="<?php echo date('Y'); ?>"></div> <div class="col-md-2"><input type="submit" name="search" value="Search" class="btn btn-primary btn-block"> </div> <div class="col-md-12"><br></div> </h4> <table class="table table-bordered" id="dynamic_field"> <thead> <tr> <th width="7%" rowspan="2" style="text-align: center;">Code</th> <th width="27%" rowspan="2" style="text-align: center;">General Description</th> <th rowspan="2" width="5%"><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus"></i></button></th> </tr> </thead> <tbody> <tr> <td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly> </td> <td> <select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option> <?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'"); while($acc = mysqli_fetch_assoc($account)){ $account_no = $acc['acoount_no']; $account_title = $acc['account_title']; ?> <option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>"> <?php echo $account_title ; ?> </option> <?php } ?> </select> </td> <td></td> </tr> </tbody> </table> </div> </div> </div> </div> 

Answer 1

您的.change函数未绑定到新的输入和选择框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
   $('select[name="account_name[]').change(function()
    {
     $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
    });
</script>
<script>
$(document).ready(function(){
  var i=1;
  var chart_add = '<tr id="row_chart'+i+'"><td align="center">                      <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>                      <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?>                    </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
  $('#add').click(function(){
    i++;
    $('#dynamic_field').append(chart_add);
    $('.selectpicker').selectpicker('render');
       $('select[name="account_name[]').change(function()
       {
          $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
        });
    });
  $(document).on('click', '.remove_chart', function(){
    var button_id = $(this).attr("id"); 
    $('#row_chart'+button_id+'').remove();
  });

});
</script>

这样的事情应该起作用。