的Javascript：添加字段动态

我有一个HTML页面，看起来像这样：的Javascript：添加字段动态

<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 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开发人员的红宝石，发现很难实现它。

来源

2013-02-19 Supersonic

你为什么不使用jQuery？它会容易得多。 – 2013-02-19 06:01:03

当然，但我们如何使用jQuery编写相同的函数呢？ – Supersonic 2013-02-19 06:01:51

希望这有助于：

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

来源

2013-02-19 06:14:58

谢谢你。当用户添加更多内容时，是否可以动态更改这两个字段的ID。因此，首先： id =“client_category_name_1”second：id =“client_category_name_2”，最后id =“client_category_name_3”，因为我们不会添加更多的3.然后Id应该改变输入和选择标记？ – Supersonic 2013-02-19 06:29:48

是的。我已经编辑代码来改变身份证了，希望这会有所帮助 – 2013-02-19 06:39:32

好的假设你已经有了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);

来源

2013-02-19 06:06:39

的Javascript：添加字段动态

回答

相关问题