Question

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

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

示例屏幕截图

here is a sample screenshot

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

类似的事情应该起作用。

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

1 个答案: