Question

我有一个表单，我希望我的用户添加最多3种语言技能和语言级别。我想只显示一个并让用户点击添加一个（再添加一个＆＃34; profile2＆＃34; div，max add 3）。反正我没有找到它。

我的HTML代码：

      <div class="container">
    <div class="profile2">
         <label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
 </select>
 <button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
    </div>
    </div>

脚本

    <script>
 $("#btnAddLanguage").click(function () {
      $('#container').append("<div class="profile2">
         <label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
 </select>
 <button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
    </div>");
    });
    </script>

Answer 1

这是你需要的吗？请检查一下。

<script>
$("#btnAddLanguage").click(function () {
	var $appendItem = $('.profile2').html();
 	$($appendItem).appendTo('.profile2');
});
</script>

<div class="profile2">
  <label for="sel1" class="langlevel">Language</label>
  <select class="form-control bfh-languages" data-language="en" id="sel1"></select>
  
  <label for="sel1" class="langlevel">Language Level</label>
  <select class="form-control" data-language="en" id="sel1">
    <option>Basic</option>
    <option>Fluent</option>
    <option>Professional</option>
    <option>Native</option>
  </select>
  <button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>

bootstrap form通过单击添加按钮添加div

1 个答案: