我在具有“添加更多”按钮的表单上有两个输入类型的文本字段,该按钮可动态添加具有相同名称的字段(数组):
<div name="teacheraddpanel" id="teacheraddpanel" style="display:none";>
<h4>Add Teachers</h4>
<div class="container">
<div class="input-group control-group after-add-more">
<div class="col-md-9">
<input type="text" id="names[]" name="names[]" placeholder="Name" required>
<input type="text" id="emails[]" name="emails[]" size="25" placeholder="Enter Email">
</div>
<button class="btn btn-success add-more" type="button">Create Another </button>
</div>
</div>
</div>
我一直努力尝试在同一行中的该组中包含一个选择字段,该字段也可以多次添加(数组)。我正在尝试类似的东西:
<div style="display:inline-block;">
<button class="btn btn-default dropdown-toggle" type="button" id="grade[]" name="grade[]" data-toggle="dropdown" aria-haspopup="true" aria expanded="true">Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="grademenu">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
我正在努力使用这种选择框来实际显示所选择的内容,然后尝试弄清楚如果用户选择“添加更多”则如何动态创建具有相同名称的其他字段。这是单击“添加更多”时添加其他TEXT字段的脚本。
//first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
...
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class=" input-group control-group" style="margin-top:8px">
<div class="col-md-10">
<input type="text" name="names[]" placeholder="Enter Name">
<input type="text" name="emails[]" size="25" placeholder="Enter Email">
</div>
<div class="input-group-btn" style="float: left; align: middle;">
<button class="btn btn-danger remove" type="button"></i>Remove</button></div>
</div>
</div>