添加新<选择>通过单击按钮标记
Adding new <select> tag by clicking on the button
我有一个"添加语句"按钮,每次单击该按钮后,我都需要在页面上显示一个<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>
相关文章:
- 如何隐藏按钮单击事件上的占位符
- 从Web服务器下载图像按钮单击使用JavaScript
- 在SweetAlert中传递ASP.NET按钮单击事件
- 单选按钮单击可刷新/更改网站的小区域
- 调用按钮单击事件 ajax 加载的用户控件
- 附加 jQuery 代码以在加载和按钮单击时运行
- 在按钮单击时将图像URL数据显示到弹出框中,而无需禁用背景
- 按钮单击服务器单击
- 触发单选按钮单击,并在页面刷新时记住选择
- 如何使用 javascript 而不是使用控制器中的方法在 rails 中呈现部分按钮单击
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 如何在 Angular JS 中的按钮单击上添加类
- 当元素上有多个类时触发按钮单击事件
- 如何在 HTML 中的按钮单击上更改图像(IMG URL 每次来自服务器)
- 如何使用javascript刷新我的html页面时清除按钮单击
- 阻止后退按钮 - 单击按钮时忽略
- 如何制作按钮.单击“开始时不运行”
- Rails:尝试在按钮单击时渲染部分
- 在页面加载时调用函数,在按钮单击时再次调用函数,但参数不同
- 如何在服务器端的文本中添加按钮单击事件