添加新<；选择>；通过单击按钮标记 - Adding new <select> tag by clicking on the button

Adding new <select> tag by clicking on the button

本文关键字：按钮单击 gt lt 选择添加 | 更新日期: 2023-09-27

我有一个"添加语句"按钮，每次单击该按钮后，我都需要在页面上显示一个<select>标记（不刷新页面）。这是Select的代码：

<select id = "statement" name = "statement">
<?php
   $select = "SELECT name FROM Statements";
   $res = $conn->query($select);
   while($row = $res->fetch_assoc()){
       echo "<option value='"" . $row['name'] . "'">" . $row['name'] . "</option>";
   }
?>
</select>

我该怎么做？

使用ELEMENT.cloneNode(true)克隆元素，使用true也克隆子节点：

var selectionCounter = 0
function cloneSelect() {
  var select = document.getElementById("statement")
  var clone = select.cloneNode(true)
  var name = select.getAttribute("name") + selectionCounter++
  clone.id = name
  clone.setAttribute("name", name)
  document.getElementById("selectContainer").appendChild(clone)
}

<div id="selectContainer">
  <select id="statement" name="statement">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
<button onclick="cloneSelect()">Add another Select</button>

有关node.cloneNode(deep)的更多信息，请点击此处：https://developer.mozilla.org/en/docs/Web/API/Node/cloneNode

我认为它会对你有所帮助-

<script>
   function addOption(){
   var sel = document.getElementById("statement");
   var option = document.createElement("option");
   option.innerHTML = "name";
   option.value = "1";
   sel.appendChild(option);
}
</script>

试试这个。它可能会对你有所帮助。

<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="container"></div>
<button type="button" id="add" onclick="addOption()">Add a statement</button>
<?php
$que = mysql_query("SELECT name FROM Statements") or die(mysql_error());
$script = "<script>function addOption(){";
$script .= "var container = document.getElementById('container');";
$script .= "var select = document.createElement('select');";
while($data = mysql_fetch_array($que)){
$script .= "var option = document.createElement('option');";
  $script .= "option.innerHTML = '$data[0]';";
  $script .= "select.appendChild(option);";
}
$script .= "container.appendChild(select);";
$script .= "}</script>";
echo $script;
?>

</body>
</html>