Question

我正在尝试构建一个系统，就像任何用户点击“添加”按钮一样，它会自动创建两个文本字段和两个下拉选项。我在谷歌搜索了教程，但我设法找到的只是如何添加文本字段，但我需要添加选择下拉列表和删除选项。

我对PHP有一些了解，但在Javascript或Jquery中却很少。

请你帮忙吗？

以下是我找到的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script>
function generateRow() {

var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='food'>";

var e=document.getElementById("div");
e.innerHTML+="<input type='text' name='food'>";

}
</script>
</head>

<body>
 <form id="form1" name="form1" method="post" action="">
<label>
 <input name="food" type="text" id="food" />
</label>

  <div id="div"></div>
  <p><input type="button" value="Add" onclick="generateRow()"/></p>
  <p>
  <label>
   <input type="submit" name="Submit" value="Submit" />
  </label>
  </p>
  </form>
  </body>
 </html>

Answer 1

这是一个例子，我希望你能得到这个想法

http://jsfiddle.net/AKJwF/1/

jQuery的：

$("#gr").click(function(){

    $("<input/>",{type:"text",class:"textinp"}).appendTo("#textFieldContainer");
   $("<input/>",{type:"text",class:"textinp"}).appendTo("#textFieldContainer");

});

$("#gs").click(function(){

    $("<select/>",{class:"sel"}).appendTo("#selectContainer");
   $("<select/>",{class:"sel"}).appendTo("#selectContainer");

});

HTML：

<div id="textFieldContainer"></div>    
<div id="selectContainer"></div>

<a href="#" id="gr">Generate Row</a>
<a href="#" id="gs">Generate DropDown</a>

Answer 2

在jQuery中，要创建一个元素，您可以简单地执行此操作：

var newDiv = $("<div>");

现在，页面中尚不存在该元素。您可以通过多种方式添加它。一种常见的方法是将其附加到现有元素。这会将新div附加到body元素：

newDiv.appendTo("body");

这也是：

$("body").append(newDiv);

这会将它附加到id为“foo”的元素：

newDiv.appendTo("#foo");

因此，假设您希望每次单击按钮时都生成以下HTML：

<div>
    <input name="a" />
    <input name="b" />
    <select name="c">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
    </select>
    <select name="d">
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
    </select>
</div>

假设您要将ID添加到id为“div”的div中，您的代码可能如下所示：

$("input[type=button][value=Add]").click(function (e) {
    e.preventDefault(); // prevent submitting the form.
    var newDiv = $("<div>").appendTo("#div");
    $("<input>").attr("name", "a").appendTo(newDiv);
    $("<input>").attr("name", "b").appendTo(newDiv);
    $("<select>").attr("name", "c").appendTo(newDiv).append(
        $("<option>").val("0").text("Option 1"),
        $("<option>").val("1").text("Option 2"));
    $("<select>").attr("name", "d").appendTo(newDiv).append(
        $("<option>").val("0").text("Option 1"),
        $("<option>").val("1").text("Option 2"));
});

以下是一个有效的例子：http://jsfiddle.net/v5kvX/

修改：包含删除按钮。您将要像创建其他元素一样创建<button>，然后添加一个删除父div的单击处理程序。从上面将此行添加到您的函数中：

$("<button>").text("Remove").appendTo(newDiv).click(function (e) {
    e.preventDefault(); // prevent submitting the form.
    $(this).parent().remove(); // alternatively, you could say: newDiv.remove();
});

更新示例：http://jsfiddle.net/gilly3/v5kvX/1/

使用javascript / Jquery自动生成文本输入和下拉选择

2 个答案: