当用户单击添加更多时复制选择/选项框

Question

我正在尝试制作一个简单的在线表格。表单的组成部分之一是显示不同员工的下拉菜单（选择/选项）。我已经在 J​​S 中填充了它：

$('#employees').append($('<option>', { value: 1, text: 'Adam' }));

但如果用户想添加另一个员工，我有一个按钮，他们可以单击该按钮，该按钮应该像以前一样添加另一个下拉菜单。我正在努力正确地做到这一点。我试图像这样将整个“代码部分”附加到 JS：

$(function() {
    $("#addMore").click(function(e) {
        e.preventDefault();
        $("#fieldList").append("<label for='employees'>Employee</label>");
        $("#fieldList").append("<div class='select-wrapper'>");
        $("#fieldList").append("<label for='employees'>Employee</label>");
        $("#fieldList").append("<select id='employees' name='employees'>");
        $("#fieldList").append("<option>- Select Employee -</option>");
        $("#fieldList").append("</select>");
        $("#fieldList").append("</div>");
        $("#fieldList").append("</div>");

    });
});

但这会导致：

显然出了点问题。部分下拉菜单不可交互。那么我的问题是我怎样才能正确地做到这一点，我怎样才能做得更好？

HTML 代码

<!-- START OF EMPLOYEE -->
<div class="field third first" id="fieldList">
<label for="employees">Employee</label>
    <div class="select-wrapper">
        <select id="employees" name="employees">
            <option value="">- Select Employee -</option>
        </select>
    </div>
</div>

<div class="field third first">
    <label for="wages">Amount Paid</label>
    <input type="text" name="wages" id="wages" value=""/>
</div>

使用模板https://html5up.net/story

编辑 https://jsfiddle.net/h3by56ws/ ("error": "Shell 表单不验证)

Answer 1

Take a look at this fiddle. You only need a few lines of jQuery to do this.

请记住，您不应该有多个具有相同 ID 的 DOM 元素，因此您需要对其进行修改。

如果你的 HTML 如下所示，那么你只需要这个 Javascript：

$(function() {
    $("#addMore").click(function(e) {
        var newSelect = $("#employees").clone();
        newSelect.val("");
        $("#select-wrapper").append(newSelect);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div class="field third first" id="fieldList">
  <label for="employees">Employee</label>
  <div id="select-wrapper" class="select-wrapper">
    <select id="employees" name="employees">
            <option value="">- Select Employee -</option>
            <option value="1"> Bob </option>
            <option value="1"> Mark </option>
            <option value="1"> Alice </option>
            <option value="1"> Jamie </option>
            <option value="1"> Kris </option>
        </select>
  </div>
</div>
<div>
  <button id="addMore">
 Add Employee
 </button>
</div>
<div class="field third first">
  <label for="wages">Amount Paid</label>
  <input type="text" name="wages" id="wages" value="" />
</div>