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

我想建立一个系统，当任何用户点击一个“添加”按钮时，它会创建两个文本字段和两个下拉选择自动。我在谷歌搜索教程，但所有我设法找到只是如何添加文本字段，但我需要添加选择下拉删除选项。自动生成文本输入和下拉选择使用javascript/jquery点击

我在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>

来源

2011-09-02 black_belt

在jQuery中，创建一个元素，你可以简单地这样做：

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

现在，该元素还没有在页面中存在。您可以添加多种方式。一种常见的方法是将其追加到现有元素。这将在新的div追加到body元素：

newDiv.appendTo("body");

这太：

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

，这将追加到一个元素与 “富” 的ID：

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>

而且假设你要到HTML添加到您的div有“格”的ID，你的代码可能是这个样子：

$("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的click处理程序。这条线从上面添加到您的函数：

$("<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/

来源

2011-09-02 05:21:53 gilly3

非常感谢你为这样一个奇妙的教程。它工作正常，而且正是我想要的。我正在阅读代码并试图弄清楚事情是如何发生的。 :)再次感谢 –

嗨，gilly3，如何包括删除按钮删除文本框和下拉选择如果添加错误？再次感谢您的精彩教程。 :) –

@Srijon - 你希望有足够的空间来创建按钮，但可能需要点击处理程序的帮助。您需要在按钮的父div上调用'.remove（）'，即'newDiv'。看到我更新的答案。 – gilly3

这里是一个例子，我希望你能明白我的意思

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>

来源

2011-09-02 05:05:18 Rafay

随着应有的尊重我加入了代码左右。（为子孙后代） –

@roXon多数民众赞成在我应该做的第一个地方，我感谢你代表未来几代'：）' – Rafay

非常感谢你。 –

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

回答

相关问题