Javascript 如何通过AJAX将数据放入第二个select元素？

我需要帮助！我有一个按钮，每当它被点击，一个模态弹出。这是我的情态：

modal_newDelivery.php

<div class="modal fade" id="modal_new_delivery" tabindex="-1" role="dialog" aria-labelledby="newProductFormLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newProductFormLabel">New Delivery</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="container">
            <div class="form-group row">
              <div class="col-6">
              <label for="txt_drnumber">DR#</label>
              <input class="form-control" type="text" id="txt_drnumber">
              </div>
            </div>
            <div class="form-group row">
              <div class="col-6">
              <label for="txt_supplier">Supplier</label>
              <input class="form-control" type="text" id="txt_supplier">
              </div>
            </div>
            <table class="table table-bordered" id="table_new_delivery">
              <thead>
                <tr>
                  <th>ITEM</th>
                  <th colspan="2">QTY(pcs)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><select class="form-control" id="select_products"></select></td>
                  <td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td>
                  <td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td>
                </tr>
              </tbody>
            </table> 
            <br>
            <button type="button" class="btn btn-info" style="width:100%;" onclick="newrow()">ADD A NEW ROW</button>
          </div>
            </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="clear()">Clear</button>
        <button type="button" class="btn btn-primary" onclick="">Save</button>
      </div>
    </div>
  </div>
</div>

在我的情态中。有一张桌子。其中一个td是select

结果是：

单击“添加新行”按钮时，它将添加一行，其中包含一个select元素。但是新添加的select元素没有任何与第一个select元素不同的数据

这是单击“添加新行”按钮时的代码：

var row = '<tr><td><select class="form-control" id="select_products"></select></td><td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td><td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td></tr>';

    function newrow(){
        $('#table_new_delivery tbody').append(row);
        console.log(row);
        loadselectproducts();
    } 

var行='-'；
函数newrow（）{
$（“#表_新_交付体”）。追加（行）；
控制台日志（行）；
loadselectproducts（）；
} 

是，添加了新行，但新行的select元素没有任何数据。我希望我的第一个select元素的数据与我新添加的select元素的数据相同

你能帮忙吗？我知道这是个新手问题

谢谢,

---

卡尔

你能展示一下你的第一个选择吗？还可以看看jquery的方法。$（'select#u products'）.html（response）；AJAX响应将转到我的select_产品，这是model中的第一个select。

var row = '<tr><td><select class="form-control" id="select_products"></select></td><td><input type="text" class="form-control" id="txt_qty" onkeypress="return isNumberKey(event)"></td><td><button type="button" class="btn btn-danger remove" class="removerow">-</button></td></tr>';

    function newrow(){
        $('#table_new_delivery tbody').append(row);
        console.log(row);
        loadselectproducts();
    }