1

一个写得不好的问题，但基本上我有一个表格供用户将他们的值添加到数据库中。其中一个字段需要一个下拉框，其中填充了我的数据库字段中的值。然而，用户可能希望拥有多个选择框（所有下拉选择都需要发布到同一个数据库字段）。

<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 但无济于事）

而且我还想知道如何将数据库值直接拉入选择框选项。

感谢您提供任何帮助，谢谢-Matt

4

3 回答 3

2

您的 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"]);
于 2012-04-21T23:36:11.767 回答
0

您可以使用 Ajax 将数据从服务器拉到客户端并从 JavaScript 创建 SELECT。

在 JavaScript 中有多种方式来构造 SELECT：

  • 使用 DOM 方法，比如document.createElement与其他选择相比更慢
  • 将 SELECT 和 OPTIONS 构造为字符串，然后使用 innerHTML 注入父容器。这在性能上比 DOM 方式更快。

HTH。

于 2012-04-21T23:16:23.497 回答
0

要复制一个选项：

var opt_val = $("select[name=ingredient_select] :selected").val();

$("select[name=ingredient_select]").append(" <option value='" + opt_val + "' selected='selected'>Ingredient</option>")

于 2012-04-21T23:26:48.760 回答