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

Question

There is a select2 element in my jsp page :

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

At runtime when chosing an option in the select2 element then clicking the #clear button then the select2 listbox's text is not reset , but its value is reset ! So how to reset its text ?

Answer 1

You also have to trigger a method, called change on the select box:

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