使用帶有過濾器的 Bootstrap Selectpicker 克隆表行

Question

我有一個使用 Bootstrap 的 Laravel 應用程序。 我有一個表單（如下所示），我想通過單擊“添加行”按鈕添加更多行（通過 JS）。 我有一個 Select/Selectpicker（“Opponent”），我希望能夠鍵入並實時過濾以找到正確的選項。

Selectpicker 在第 1 行工作正常。但是，當我克隆該行時，Selectpicker 做了 2 件奇怪的事情：(1) 新的 Select 失去了所有選項，所以沒有什么可供選擇，並且 (2) 它保留了選定的克隆元素的值，而不是像輸入的 rest 那樣清除。

注意：在下面的 HTML 代碼中，您將看到一個注釋掉的 Select 用於 static ZE062625 不使用過濾器的 ZE0626222614BDEE311。 這工作得很好； 克隆成功，清除值，並在下拉列表中包含所有選項。 只有 Selectpicker 有克隆問題。

JavaScript function：

<script>
  function cloneRow() {

    var table = document.getElementById("gameBody"); // find table to append to
    var count = table.rows.length + 1;
    var gameStr = "game";
    var oppString = "opponent";

    var row = document.getElementById("game1"); // find row to copy

    var clone = row.cloneNode(true); // copy children too
    clone.id = gameStr + count; // change id of new row

    table.appendChild(clone); // add new row to end of table

    // Clear fields in new row
    var newRow = document.getElementById(gameStr.concat(count));
    inputs = newRow.getElementsByTagName('input');
    for (index = 0; index < inputs.length; ++index) {
      if(inputs[index].type == "text" || inputs[index].type == "date")
        inputs[index].value = '';
    }
  }
</script>

CSS/JS 包括：

<!-- Inside the Head tag -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css">

<!-- At the bottom of the Body -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/i18n/defaults-*.min.js"></script>

HTML 表：

<table class="table table-sm table-striped" id="game_table">
  <thead>
    <tr>
      <th>Date*</th>
      <th>Opponent</th>
      <th>Name Override</th>
      <th>Location*</th>
      <th>Site Name</th>
      <th>Game Type*</th>
    </tr>
  </thead>
  <tbody id="gameBody">
    <tr class="dummy-row" id='game1'>

      <!-- Date -->
      <td>
        <input type="date" name='gameDate[]' id="gameDate1" class="form-control" required/>
      </td>

      <!-- Opponent -->
      <td>
        <select name='opponent[]' id="opponent1" class="selectpicker form-control" data-live-search="true" title="Select an opponent" data-hide-disabled="true">
        <!--<select name='opponent[]' class="form-control"title="Select an opponent">-->
          <option value="">Select a Team</option>
            @foreach($allschools as $school)
              <option value="{{ $school->id }}">{{ isset($school->nickname) ? $school->nickname : $school->name }}
              @if($school->name != $school->city)
                ({{ $school->city }})
              @endif
              </option>
            @endforeach
        </select>
      </td>

      <!-- Opponent Override -->
      <td>
        <input type="text" name='opponentOverride[]' id="opponentOverride1" class="form-control"/>
      </td>

      <!-- Location -->
      <td>
        <select name='location[]' id="location1" class="form-control" required>
          <option value="HOME">Home</option>
          <option value="AWAY">Away</option>
        </select>
      </td>

      <!-- Site Name -->
      <td>
        <input type="text" name='site[]' id="site1" class="form-control"/>
      </td>

      <!-- Game Type -->
      <td>
        <select name='gameType[]' id="gameType1" class="form-control" required>
          <option value="REGULAR SEASON">Reg. Season</option>
          <option value="POSTSEASON">Postseason</option>
          <option value="SCRIMMAGE">Scrimmage</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<table class="table tabls-sm table-borderless">
  <tr>
    <td class="text-left" width="50%">
      <a id='add_row' onclick="cloneRow()" class="btn btn-sm btn-warning">Add Row</a>
    </td>
    <td class="text-right" width="50%">
      <a id='delete_row' onclick="deleteLastRow()" class="btn btn-sm btn-danger">Delete Last Row</a>
    </td>
  </tr>
</table>

謝謝您的幫助！

Answer 1

我用它作為藍圖想出來了： 使用 SelectPicker 動態添加行

在高層次上，這是我必須做的：

1. 從 Selectpicker（“對手”）中移除“selectpicker”class
2. 在add_row() function中，初始化Selectpicker class
3. 動態地將 append 生成的 HTML 作為新行

我想這取決於 Bootstrap 如何處理 Selectpicker class。 我不完全理解它，但我能解釋的最好的是...當您使用 <select class="selectpicker"... Bootstrap 更改 object 使其不再是帶有屬於它的選項的純 Select。 相反，它會將其包裝在其他動態創建的層中（div=>select=>button=>div=>options 等）。 這會導致克隆時出現問題，因為您正在克隆的 object（選擇）不再包含這些選項，因為它們在層次結構中的其他位置丟失（因為缺少更好的術語）。 我記得在另一篇文章中讀過，但直到現在才真正明白（有點）。

這是我的功能代碼：

HTML 表：

<table class="table table-sm table-striped" id="gameTable">
  <thead>
    <tr>
      <th>Date*</th>
      <th>Opponent</th>
      <th>Name Override</th>
      <th>Location*</th>
      <th>Site Name</th>
      <th>Game Type*</th>
    </tr>
  </thead>
  <tbody id="gameBody">
    <tr id="gameRow">

      <!-- Date -->
      <td>
        <input type="date" name='gameDate[]' id="gameDate1" class="form-control" required/>
      </td>

      <!-- Opponent -->
      <td>
        <select name='opponent[]' id="opponent1" class="form-control" data-live-search="true" title="Select an opponent" data-hide-disabled="true">
        <!--<select name='opponent[]' class="form-control" title="Select an opponent">-->
          <option value="">Select a Team</option>
            @foreach($allschools as $school)
              <option value="{{ $school->id }}">{{ isset($school->nickname) ? $school->nickname : $school->name }}
              @if($school->name != $school->city)
                ({{ $school->city }})
              @endif
              </option>
            @endforeach
        </select>
      </td>

      <!-- Opponent Override -->
      <td>
        <input type="text" name='opponentOverride[]' id="opponentOverride1" class="form-control"/>
      </td>

      <!-- Location -->
      <td>
        <select name='location[]' id="location1" class="form-control" required>
          <option value="HOME">Home</option>
          <option value="AWAY">Away</option>
          <!--<option value="NEUTRAL">Neutral</option>-->
        </select>
      </td>

      <!-- Site Name -->
      <td>
        <input type="text" name='site[]' id="site1" class="form-control"/>
      </td>

      <!-- Game Type -->
      <td>
        <select name='gameType[]' id="gameType1" class="form-control" required>
          <option value="REGULAR SEASON">Reg. Season</option>
          <option value="POSTSEASON">Postseason</option>
          <option value="SCRIMMAGE">Scrimmage</option>
        </select>
      </td>

    </tr>
  </tbody>
</table>

<table class="table tabls-sm table-borderless">
  <tr>
    <td class="text-left" width="30%">
      <a id='add_row' onclick="add_row()" class="btn btn-sm btn-warning">Add Row</a>
    </td>
    <td class="text-center" width="40%">
      <button type="submit" class="btn btn-primary">Create Games</button>
    </td>
    <td class="text-right" width="30%">
      <a id='delete_row' onclick="deleteLastRow()" class="btn btn-sm btn-danger">Delete Last Row</a>
    </td>
  </tr>
</table>

Function（機身底部）：

<script>
  var cloned = $("#gameTable tbody tr:first").clone() //keep clone for later use..
  $("select[name*=opponent]").selectpicker() //intialize your slectpicker
  function add_row() {
    $(cloned).find("input").val("") //empty any input..
    $("<tr>" + $(cloned).html() + "</tr>").appendTo($("#gameTable tbody")) //append to your tbody..
    $("#gameTable tbody tr:last select").selectpicker() //intialize newly added selct...
  }
</script>