Question

参考：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 -->

JS

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

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

Answer 2

在按钮上下文中调用preventDefault：

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

克隆选择下拉菜单时的表单验证错误

2 个答案: