克隆行时自动删除下拉列表中的选定选项

Question

function cloneRow() {
  var row = document.getElementById("dropdowns");
  var table = document.getElementById("tableDrop");
  var clone = row.cloneNode(true);
  clone.id = "dropdowns";
  table.appendChild(clone);
  var x = document.getElementById("beansDrop");
  x.remove(x.selectedIndex);
}

<div class="modal-body">
  <form method="post" action="adeliveries.php">
    <table align="center">
      <tr>
        <td>Supplier:</td>
        <td id="num">
          <select name="num">
            <?php while($row1 = mysqli_fetch_array($result2)):;?>
            <option value="<?php echo $row1[3];?>">
              <?php echo $row1[1], " - " , $row1[3];?>
            </option>
            <?php endwhile;?>
          </select>
        </td>
      </tr>
    </table>
    <div style="overflow-x:auto;">
      <table id="tableDrop">
        <tr>
          <th>
            <h5>COFFEE BEAN</h5>
          </th>
          <th>
            <h5>QUANTITY(kg)</h5>
          </th>
          <th>
            <h5>REMOVE ORDER</h5>
          </th>
        </tr>

        <tr id="dropdowns">
          <td id="beansDropdown">
            <select name="beans[]" id="beansDrop">
              <?php while($row1 = mysqli_fetch_array($result1)):;?>
              <option value="<?php echo $row1[1], " - ";?>">
                <?php echo $row1[1];?>
              </option>
              <?php endwhile;?>
            </select>
          </td>
          <td id="quantity">
            <input type="number" name="quan[]" placeholder="enter quantity" required>
          </td>
          <td id="remove">
            <input type="button" value="&#10006;" onclick="RemoveOrder()">
          </td>
        </tr>
      </table>
    </div>
    <table>
      <br>
      <tr>
        <td><input type="button" onclick="cloneRow()" value="Add Order" class="btn btn-secondary" /></td>
        <td><input type="submit" name="abc" value="Send" class="btn btn-primary" /></td>
      </tr>
    </table>
  </form>
</div>

我正在创建一个简单的订单表单，用户可以从下拉菜单中选择咖啡豆类别并输入数量。有一个添加订单按钮，如果用户希望订购另一个，它将克隆该行。当我单击添加订单时，我可以做些什么来自动隐藏或删除选定的 bean/s？因为它只是简单地克隆了行。

我尝试过循环，但我对它的逻辑感到困惑。

每次我克隆该行时，它也会在每个下拉菜单中被删除，包括我从中选择它的下拉菜单。

function cloneRow(){
  var row = document.getElementById("dropdowns");
  var table = document.getElementById("tableDrop");
  var clone = row.cloneNode(true);
  clone.id = "dropdowns";
  table.appendChild(clone);
  var x = document.getElementById("beansDrop");
  x.remove(x.selectedIndex);
}

<tr id="dropdowns">                                          
  <td id="beansDropdown">
    <select name="beans[]" id="beansDrop">
      <option value="beans1">beans1</option>
      <option value="beans2">beans2</option>
      <option value="beans3">beans3</option>
      <option value="beans4">beans4</option>
    </select>
  </td>
  <td id="quantity">
    <input type="number" name="quan[]" placeholder="enter quantity" required>
  </td>
  <td id="remove">
    <input type="button" value="&#10006;" onclick="RemoveOrder()">
  </td>
</tr>

Answer 1

首先 id 选择器应该是唯一的，所以在这种情况下最好使用 class。在您的代码中，您始终会获得第一个下拉菜单并删除所选值。要使其正常工作，请获取最后一个下拉列表，克隆它并从克隆中删除选定的值。

function cloneRow(e) {
  e.preventDefault();
  var row = document.querySelector(".dropdowns:last-child");
  var tableBody = document.querySelector("#tableDrop tbody");
  var clone = row.cloneNode(true);
  clone.querySelector('.beansDrop').remove(row.querySelector('.beansDrop').selectedIndex);
  tableBody.appendChild(clone);
}

<table id="tableDrop">
  <tr class="dropdowns">
    <td class="beansDropdown">
      <select name="beans[]" class="beansDrop">
        <option value="beans1">beans1</option>
        <option value="beans2">beans2</option>
        <option value="beans3">beans3</option>
        <option value="beans4">beans4</option>
      </select>
    </td>
    <td id="quantity">
      <input type="number" name="quan[]" placeholder="enter quantity" required>
    </td>
    <td id="remove">
      <input type="button" value="&#10006;" onclick="RemoveOrder()">
    </td>
  </tr>
</table>
<button onClick="cloneRow(event)" type="button">add order</button>

仅供参考：如果您想从所有其他下拉列表中删除所选元素，则必须遍历所有下拉列表。

---

禁用而不是删除元素。

function cloneRow(e) {
  e.preventDefault();
  var row = document.querySelector(".dropdowns:last-child");
  var tableBody = document.querySelector("#tableDrop tbody");
  var clone = row.cloneNode(true);
  var clonedDrop = clone.querySelector('.beansDrop');
  var lastDrop = row.querySelector('.beansDrop');
  clonedDrop.value = '';
  if (lastDrop.selectedIndex != -1) clonedDrop.options[lastDrop.selectedIndex].disabled = true;
  tableBody.appendChild(clone);
}


function RemoveOrder(ele) {
  var row = ele.closest('tr');
  var drop = row.querySelector('.beansDrop');
  var alldrop = document.querySelectorAll('.beansDrop');
  if (drop.selectedIndex != -1)
    alldrop.forEach(ele => ele.options[drop.selectedIndex].disabled = false)
  row.remove();
}

<table id="tableDrop">
  <tr class="dropdowns">
    <td class="beansDropdown">
      <select name="beans[]" class="beansDrop">
        <option value="beans1">beans1</option>
        <option value="beans2">beans2</option>
        <option value="beans3">beans3</option>
        <option value="beans4">beans4</option>
      </select>
    </td>
    <td id="quantity">
      <input type="number" name="quan[]" placeholder="enter quantity" required>
    </td>
    <td id="remove">
      <input type="button" value="&#10006;" onclick="RemoveOrder(this)">
    </td>
  </tr>
</table>
<button onClick="cloneRow(event)" type="button">add order</button>

仅供参考：要在更改下拉列表时更新禁用属性，您必须实现更改事件处理程序。