克隆选择下拉菜单时出现表单验证错误答案

【问题标题】：Form Validation Error when cloning a select drop down menu克隆选择下拉菜单时出现表单验证错误
【发布时间】：2018-01-17 18:51:43
【问题描述】：

参考：Duplicate the Select/Option box when user clicks add more

我有一个带有下拉菜单的表单。当用户选择“添加更多字段”时，会出现下拉菜单的副本。但是，这会导致此错误。我想知道如何解决这个问题。

JSFiddle: https://jsfiddle.net/h3by56ws/

完整的错误：

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x7f037e0df1d0>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x7f037dec9b90>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x7f037e0df1d0>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x7f037dec9f90>, 'help_text': '', 'name': 'js_wrap'}"}

HTML

<form method="POST" action="">
    <!-- START OF EMPLOYEE -->
    <div class="field third first">
        <label for="employees">Employee</label>
        <div id="select-employees" 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>

</br></br>
<button id="addMore" class="button small">Add Employee</button>
<!-- END OF EMPLOYEE -->

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您的“添加员工”元素是一个 HTML5 按钮元素。此元素具有提交的默认行为，如 W3 规范中所述，如下所示：W3C HTML5 Button

为了覆盖此行为，您只需将type="button" 添加到元素。

见下文：

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

<html>
  <body>
    <div>
    
      <!-- Form -->
      <section class="wrapper style1 align-center">
        <div class="inner">
          <div class="index align-left">
            <section>
              <div class="content">
                <form method="POST" action="">
                  <p>Select the month and the year that the expenses spreadsheet will be generated for.</p>
        

                  <!-- START OF EMPLOYEE -->
                  <div class="field third first">
                    <label for="employees">Employee</label>
                    <div id="select-employees" 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>

                  </br></br>
                  <button id="addMore" class="button small" type="button">Add Employee</button>
                  <!-- END OF EMPLOYEE -->

                  <!-- END OF FORM -->
                  </br></br></br></br>
                  <ul class="actions">
                    <li><input type="submit" name="submit" id="submit" value="Generate Report" /></li>
                  </ul>
                </form>
              </div>
            </section>
          </div>
        </div>
      </section>

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

    </div>
  </body>
</html>

【讨论】：

哇！那让我难住了！非常感谢！

【解决方案2】：

在按钮上下文中调用preventDefault：

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

【讨论】：