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

Question

我正在尝试制作一个简单的在线表格。表单的组成部分之一是显示不同员工的下拉菜单(选择/选项)。我已经用 JS 填充它了:

$('#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>