自動生成文本輸入和下拉選擇使用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點擊

回答

相關問題