Javascript:动态添加字段

标签 javascript

我有一个 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 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>

我们如何在输入标签旁边添加这个选择标签。我是一名 ruby​​ on Rails 开发人员,发现很难实现它。

最佳答案

希望这有帮助:

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

关于Javascript:动态添加字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14950820/

相关文章:

javascript - 移动多维数组树的深层成员 - 使用 lodash 或下划线

javascript - 脚本注入(inject) Joomla 模板

javascript - 更改字体系列 Morris Donut Chart

javascript - 同时更改所有文本区域的大小

javascript - IE 7 + 8 的第 n 个子偶数和奇数

javascript - Angular JS 双重请求

javascript - 从数据库填充 JQueryUI

javascript - 将所有表单值放入 JavaScript 数组中

javascript - 基于 2D 平铺/时间的碰撞检测

javascript - 加载 facebook 页面显示每个帖子的线框。为什么?