javascript - 为什么我的代码没有正确复制选择项？

Question

编辑：它与可能的重复项不同，因为我已经解决了 clone() 方法没有复制元素的事实 - 正如我所怀疑的那样，这将是非常蹩脚的东西，prependTo 的范围也是宽，并将该行复制到多个空格中，导致“选择”值被转移到网页中的错误位置。

我很确定我的问题的答案会非常蹩脚和简单，但我不能在我的一生中做到这一点。

完成表格后，我需要将整行复制到一个 div 中以供查看，然后再将信息添加到我的数据库中。

因此，完成后，我确保复制整行，添加一个“删除”按钮，并在审阅 div 之前添加，但是当我能够复制其他所有内容时，select 语句不会复制所选值。

我尝试使用普通的 clone()，它不会复制值，然后尝试将值保存在变量中，然后将其添加到克隆的元素（在添加之前），它也不起作用。

这是html代码：

<div class="tab-pane fade p-3" id="trucks-pane" role="tabpanel" aria-labelledby="trucks-tab">
    <div class="container-fluid mt-2">
      <div class="border p-2 rounded">
        <h6 class="show-hidden-form" role="button">Add Truck(s)<span class="float-right"><i class="fas fa-chevron-down text-secondary"></i></span> </h6>
        <div class="new-elements-form" style="display: none">
          <small class="text-secondary"><i>Start typing the driver's info, rows will populate automatically</i></small>
          <div class="d-flex flex-wrap new-element custom-input-group">
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="First Name">
            </div>
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="Last Name">
            </div>
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date of Birth">
            </div>
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element" name="" value="" autocomplete="new-password" placeholder="License Number">
            </div>
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date License Issued">
            </div>
            <div class="mr-1 mb-1">
              <input type="text" class="form-control custom-input-element datepicker" name="" value="" autocomplete="new-password" placeholder="Date License Expires">
            </div>
            <div class="mr-1 mb-1">
              <select class="form-control custom-input-element" name="">
                <option value="">Select Type</option>
                <option value="B1">B1</option>
                <option value="CDL">CDL</option>
              </select>
            </div>
          </div>
          <hr>
          <div class="added-elements">

            <div class="d-none add-elements-button">
              <button type="button" class="btn btn-primary" name="button">Add Truck(s)</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid mt-2">
      <div class="border p-2 rounded">
        <h6>Registered Trucks</h6>
      </div>
    </div>
  </div>

这是处理克隆的Javascript代码：

    if(all_filled){
      var delete_button = $("<div class='mr-1 mb-1 d-flex remove-element-line' role='button'><i class='far fa-times-circle text-danger align-self-center'></i></div>");
      var select_value = scope.find('.custom-input-group').find('select').val();
      var new_line = scope.find('.custom-input-group').clone();
      new_line.find('select').val(select_value);
      new_line.removeClass('custom-input-group').find('.custom-input-element').removeClass('is-valid').attr('disabled', true);
      new_line.prepend(delete_button);
      new_line.prependTo('.added-elements');
      scope.find('.custom-input-group').find('.custom-input-element').removeClass('is-valid is-invalid').val('').first().focus();
      scope.find('.add-elements-button').trigger('toggle-button');
    }

我究竟做错了什么？

标签： javascriptjqueryhtml