如何复制 MySQL 填充的选择元素

Question

>摘要：我有一个选择列表，里面填充了来自MySQL的条目。现在我想复制列表和条目"onclick"。如何复制列表及其条目？

我有什么

<select name="acclist" id="acclist" class="acc_list">
<option value="">Select Country</option>
  <?php       
    $sql1="SELECT * FROM accounts";
        $results=$con->query($sql1); 
    while($rs=$results->fetch_assoc()) { 
    ?>
    <option value="<?php echo $rs["number"]; ?>"><?php echo $rs["name"]; ?></option>
    <?php
    }
  ?>
</select>

这是使用我的 MySQL 表中的选项填充选择标签的代码。

我想做什么单击时，用户应获得另一个选择，在另一个单击时应获得另一个选择，依此类推。每个选择都应该等于我已经拥有的选择。因此，不仅要复制选择标签，还要复制带有表中值的选项。

问题如何复制填充了 MySQL 条目的选择元素？

我尝试使用 JS，但我只得到一行。

function populate(selector) {
  $(selector)
    .append('<option value="<?echo $row0[1]; ?>"><? echo $row0[2]; ?></option>')
//    .append('<option value="bar">bar</option>')
}
populate('.myselect');

有没有其他方法可以解决它，或者我犯的错误在哪里？

提前谢谢。

Answer 1

您只需克隆deep参数设置为 true 的 select 节点，以便其内容也被克隆。然后，您只需将克隆添加到表单中即可：

法典：

var
   node = document.getElementById("acclist"),
   clone = node.cloneNode(true);
/* Insert the node to the DOM. */
node.parentNode.appendChild(clone);

片段：

/* -- JavaScript -- */
function duplicate () {
  var
    node = document.getElementById("acclist"),
    clone = node.cloneNode(true);
  /* Insert the node to the DOM. */
  node.parentNode.appendChild(clone);
}
/* Add the event listener to the 'click' event of the button. */
document.getElementById("duplicate").addEventListener("click", duplicate);

<!-- HTML -->
<button id = "duplicate">Duplicate</button>
<select name="acclist" id="acclist" class="acc_list">
  <option value="">Select Country</option>
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
</select>

---

笔记：

1. 可能附加到原始select的事件侦听器不会延续到克隆的元素。在这种情况下，您必须使用事件委派(对于JavaScript和jQuery(。
2. 克隆元素时要注意重复的 ID。