Javascript：動態添加字段

Question

我有一個看起來像這樣的html頁面：

<html>
<head>
<title></title>
<script language="javascript">
    fields = 0;
    function addInput() {
       if ( fields != 3) {
          document.getElementById('text').innerHTML += "<input type='text'         name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name' />";
          fields += 1;'
       } else {
          document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
          document.form.add.disabled = true;
       }
    }
</script>
</head>
<body>
<form name="form">
    <input type="button" onclick="addInput()" name="add" value="Add More" />
</form>
<div id="text">

</div>
</body>
</html>

這對我來說很好用。 單擊按鈕時，它將添加文本字段。 但是，我還有另一個select標簽，當單擊按鈕時也需要動態添加它。 選擇形式如下：

<select id="client_category_name" name="client_category[name]">
   <option value="">Select Category</option>
   <option value="1">internal</option>
   <option value="2">external</option>
   <option value="3">others</option>
</select>

我們如何在輸入標簽旁邊添加此選擇標簽。 我是Rails開發人員的紅寶石，發現很難實現它。

Answer 1

希望這可以幫助：

<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">

</div>
</body>
</html>

Answer 2

好的，假設您已經擁有JQuery庫

$("#text").append("<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name' />");

select和可讀代碼也是如此。 您可以先將其放在變量上

var mySelect ="";
mySelect += '<select id="client_category_name" name="client_category[name]">';
mySelect += '<option value="">Select Category</option>';

等等....

$("#text").append(mySelect);

Javascript：動態添加字段

問題描述

2 個解決方案

解決方案1
3 已采納 2013-02-19 06:14:58

解決方案2
1 2013-02-19 06:06:39

Javascript：動態添加字段

問題描述

2 個解決方案

解決方案1 3 已采納 2013-02-19 06:14:58

解決方案2 1 2013-02-19 06:06:39

解決方案1
3 已采納 2013-02-19 06:14:58

解決方案2
1 2013-02-19 06:06:39