当用户单击添加更多时，复制“选择/选项”框 [英] Duplicate the Select/Option box when user clicks add more

问题描述

我想要一个简单的在线表单。表单的一个组件是显示不同员工的下拉菜单（选择/选项）。我已经在JS中填充了它：

  $（'＃employees'）。append（$（'< option> ;'，{值：1，文字：'亚当'}））; 
  

但是如果用户想要添加另一名员工，我有一个他们可以点击的按钮，应该添加另一个和以前一样下降。我正在努力做到这一点。我试图将整个代码段附加到JS，如下所示：

  $（function（）{
 $（＃addMore）。click（function（e）{
 e.preventDefault（）; 
 $（＃fieldList）。append（< label for ='employees' >员工< / 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>）; 
 
}）; 
}）; 
  

但这导致：

编辑
https://jsfiddle.net/h3by56ws/ （错误：外壳形式无效）

解决方案

看看这个小提琴。你只需要用几行jQuery来做这件事。

请记住，你不应该有多个具有相同ID的DOM元素，所以你需要修改此。

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

  $（function（）{$（＃addMore）。click（function（e） {var newSelect = $（＃employees）。clone（）; newSelect.val（ ）; $（ ＃选择 - 包装）追加（newSelect）。 }）;}）;  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js\"></script><div class =field third firstid =fieldList> < label for =employees> Employee< / label> < div id =select-wrapperclass =select-wrapper> < select id =employeesname =employees> < option value =>  - 选择员工 - < / option> < option value =1> Bob< / option> < option value =1>标记< /选项> < option value =1> Alice< / option> < option value =1>杰米< /选项> < option value =1> Kris< / option> < /选择> < / DIV>< / DIV>< DIV> < button id =addMore>添加员工< / button>< / div>< div class =field third first> < label for =wage> Amount Paid< / label> < input type =textname =wageid =wagevalue =/>< / div>  

I have a simple online form I am trying to make. One of the components of the form is a drop down menu (select/option thing) showing the different employees. I have populated it in JS already as so:

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

But if the user wants to add another employee, I have a button they can click which should add another drop down the same as before. I am struggling to do this correctly. I have tried to just append the entire 'section of code' to JS like so:

$(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>");

    });
});

But this results in this:

Obviously something is going wrong. The section dropdown is not interact-able. MY question then is how can I do it correctly and how can I do it better?

HTML CODE

<!-- 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>

Using template https://html5up.net/story

EDIT https://jsfiddle.net/h3by56ws/ ("error": "Shell form does not validate)

解决方案

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

Keep in mind that you shouldn't have multiple DOM elements with the same ID, so you'd want to modify this.

If your HTML looks like the following, then you only need this 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>

这篇关于当用户单击添加更多时，复制“选择/选项”框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！