重置表单后 select2 元素的文本未重置

Question

我的 jsp 页面中有一个 select2 元素：

<div class="box-body">
   <form class="form-horizontal" id="frm">
    <div class="form-group">
      <label class="col-sm-4 control-label">${header_action}</label>
      <div class="col-sm-4">
        <select class="form-control select2" id="menu_code" style="width: 100%;">
            <option value="">${select_action}</option>
            <c:forEach items="${actions}" var="action">
            <option value="${action.id}">${action.lib}</option>
            </c:forEach>
        </select>
      </div>
    </form>
</div>
...
<div class="box-footer">
    <input class="btn btn-primary btn-sm" id="sauver" type="button"/>
    <input class="btn btn-default btn-sm" id="clear" type="button"/>
</div>

<script type="text/javascript">

    $(function() {

        ...

        $("#menu_code").select2();

        $("#clear").on("click",function(){
            $("#results").html("").removeClass("box");
            $("#frm")[0].reset();
        });

    });

</script>

在运行时，当在 select2 元素中选择一个选项然后单击 #clear 按钮时，select2 列表框的文本不会重置，但它的值会重置！那么如何重置其文本？

Answer 1

您还必须在 select 框上触发一个名为 change 的方法：

 $("#frm")[0].reset();
 $("#menu_code").trigger("change");

重置表单后 select2 元素的文本未重置

select2 element's text is not reset after resetting the form

jquery-select2

adminlte

select2