添加动态多个引导程序选择字段

时间:2018-09-06 21:37:11

标签: twitter-bootstrap

我在具有“添加更多”按钮的表单上有两个输入类型的文本字段,该按钮可动态添加具有相同名称的字段(数组):

<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&nbsp;&nbsp;&nbsp;&nbsp;</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>

0 个答案:

没有答案