时间戳

首页 > 解决方案 > 无法传输动态创建的选择框的数据属性数据

javascript - 无法传输动态创建的选择框的数据属性数据

问题描述

我正在尝试创建一个带有数据属性的动态选择框，该属性将在输入框上传递，此处附加的是代码的代码片段。

我似乎无法让它工作。每当我更改第一个选择框时，另一个输入框都会受到它的影响，同时输入框的值应基于所选文本框的数据属性。

所有脚本都在页面底部声明，有没有其他方法可以做到这一点？

<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">
        <table class="table table-bordered" id="dynamic_field">
          <thead>
            <tr>
              <th rowspan="2" style="text-align: center;">Code</th>
              <th rowspan="2" style="text-align: center;">General Description</th>
              <th rowspan="2"><button type="button" name="add" id="add">ADD</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" data-live-search="true" name="account_name[]" required>
                  <option></option>
                  <option value="Accounting" data-acc="100">
                    Accounting
                  </option>
                  <option value="Budget" data-acc="200">
                    Budget
                  </option>
                  <option value="Treasuary" data-acc="400">
                    Treasuary
                  </option>
                </select>
              </td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></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" data-live-search="true" name="account_name[]" required><option></option><option value="Accounting" data-acc="100"> Accounting</option><option value="Budget" data-acc="200">                 Budget</option><option value="Treasuary" data-acc="400">                        Treasuary </option> </select></td><td><button type="button" name="remove_chart" id="' + i + '" class="btn btn-danger remove_chart">REMOVE</button></td></tr>';
    $('#add').click(function() {
      i++;
      $('#dynamic_field').append(chart_add);
      $('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>
<script>
  $('select[name="account_name[]').change(function() {
    $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
  });
</script>

标签： javascriptphpmysqli

解决方案

尝试替换这个：

$('select[name="account_name[]').change(function() {
    $('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});

有了这个：

$(document).on('change', 'select[name="account_name[]', function() {
    $(this).parent().prev().children('.account_num').val(($(this).data('acc'));
});

推荐阅读