Question

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

<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

Answer 1

您的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">

这种方式并不完美，并且有性能问题，但很简单。

您应该将[]添加到select的名称，然后您可以在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"]);

Answer 2

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

在JavaScript中，有多种方法可以构建SELECT：

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

HTH。

Answer 3

复制选项：

var opt_val = $（“select [name = ingredient_select]：selected”）。val（）;

$（ “选择[名称= ingredient_select]”）。追加（   “<option value='" + opt_val + "' selected='selected'>Ingredient</option>”）

使用Javascript添加选择框;到由PHP填充的html表单

3 个答案: