这是一个
写得很糟糕的问题,但基本上我有一个表单供用户将他们的值添加到数据库中。其中一个字段需要一个下拉框,其中填充了我的数据库字段中的值。但是,用户可能希望有多个选择框(所有下拉选择都需要发布到同一数据库字段)。
<form method="POST" action="addcocktail.php" >
<tr><td>Cocktail Name: </td><td><input type="text" name="cocktailname" /> </td></tr>
<tr><td>Ingredients: </td><td><input type="text" name="ingredients" /> </td></tr>
<select name="ingredientselect">
<option value="" selected="selected">Ingredient</option>
<option value="" selected="selected">Ingredient</option>
</select>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">
<tr><td>How To: </td><td><input type="text" name="howto" /> </td></tr>
<input type="submit" value="add" />
</form>
我需要一个Javascript函数,它基本上会复制我的一个选择选项,这样用户就可以选择他们想要多少"成分";点击按钮。(我一直在玩addElement,但无济于事)
我也想知道如何将数据库值直接拉入选择框选项。
任何帮助都得到了重视,谢谢 -马特
您的 HTML 代码有一个错误:有 tr
和 td
标记,但没有table
标记。以下是如何获得所需内容的示例:
<script type="text/javascript">
function addTextboxes() {
var cont = document.getElementById("selects_container");
cont.innerHTML += document.getElementById("first_select").innerHTML;
}
</script>
...
<div id="selects_container">
<div id="first_select">
<select name="ingredientselect[]">
<option value="" selected="selected">Ingredient</option>
<option value="" selected="selected">Ingredient</option>
</select>
</div>
</div>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">
这种方式并不完美,并且存在性能问题,但很简单。
您应该将[]
添加到选择的名称中,然后您可以在 PHP 中检索所有选择的值。
另外,我可以建议您不要乘以选择或选项,而是将所选值作为文本添加到页面。选定的值可以存储在隐藏的input
标签中并传递给服务器:
<script type="text/javascript">
function addTextboxes() {
var new_value = document.getElementById("the_select").value;
document.getElementById("selected_values").value += new_value + ",";
document.getElementById("selected_text").innerHTML += new_value + "<br>";
}
</script>
...
<input id="selected_values" name="selected_values" type="hidden">
<div id="selected_text"></div>
<select name="ingredientselect[]" id="the_select">
<option value="" selected="selected">Ingredient</option>
<option value="" selected="selected">Ingredient</option>
</select>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">
在服务器端:
$selected_values_array = explode(",", $_POST["selected_values"]);
您可以使用 Ajax 将数据从服务器拉入客户端,并从 JavaScript 创建 SELECT。
在 JavaScript 中,有多种方法可以构造 SELECT:
- 使用 DOM 方法,例如
document.createElement
与其他选择相比
,它更慢 - 将 SELECT 和 OPTIONS 构造为字符串,然后使用 innerHTML 注入到父容器中。 这在性能上比 DOM 方式更快。
呵。
复制选项:
var opt_val = $("select[name=ingredient_select] :selected").val();
$("select[name=ingredient_select]").append("
<option value='" + opt_val + "' selected='selected'>Ingredient</option>
")