Boostrap Modal中的表單不會重置

Question

我正在使用下面的單擊事件重置表單。

'click .resetBulkAssignForm' : function(events, template){ 
    console.log('Reset', $(".bulkAssignForm")[0]); 
    $(".bulkAssignForm")[0].reset(); 
    $(".bulkAssignForm").find("select").val(""); 
    $('#firmName').select2('data', null); 
}, 

我也嘗試了大多數可用於解決這個問題的答案。

問題：如何在Bootstrap模式中重置窗體？

下面是控制檯輸出模式的圖像。

注：我使用AdminLTE 2.3.11，選擇二。也請帶我已經在SO鏈接已經嘗試過解決方案，如how-to-clear-all-input-fields-in-bootstrap-modal-when-clicking-data-dismiss-butt一張紙條，how-to-reset-form-body-in-bootstrap-modal-box

在你需要看情況添加HTML代碼。

<div id="myBulkModal" class="modal fade modal-primary" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h2 class="modal-title">Bulk Assignment</h2> 
     </div> 
     <div class="modal-body"> 
      <section class="content"> 
      <form class="bulkAssignForm"> 
       <fieldset> 
       <div class="row"> 
        <input type="hidden" id="taskIdInput" value="{{getTaskId}}" /> 
       </div> 
       <div class="row"> 
        <div class="input-group col-sm-12"> 
        <label for="firmName">Firms</label><br /> 
        <select id="firmName" multiple class="form-control input-lg" required> 
         {{#each firmNamesFromAssignment}} 
          <option value="{{value}}">{{label}}</option> 
         {{/each}} 
        </select> 
        </div> 
       </div> 
       <br /> 
       <div class="row"> 
        <div class="input-group col-sm-12"> 
        <label for="assignee">Assignee</label><br /> 
        <select id="assignee" class="form-control input-lg" required> 
         <option selected="selected" value="">Select Option</option> 
         {{#each usersSelect2}} 
          <option value="{{value}}">{{label}}</option> 
         {{/each}} 
        </select> 
        </div> 
       </div> 
       <br /> 
       <div class="row"> 
        <div class="input-group col-sm-12"> 
        <label for="reviewedBy">Reviewer</label><br /> 
        <select id="reviewedBy" class="form-control input-lg" required> 
         <option selected="selected" value="">Select Option</option> 
         {{#each usersSelect2}} 
          <option value="{{value}}">{{label}}</option> 
         {{/each}} 
        </select> 
        </div> 
       </div> 
       <br /> 
       <div class="row"> 
        <!-- buttons --> 
        <button type="submit" class="btn btn-outline"> 
        <span class="glyphicon glyphicon-ok"></span> Assign 
        </button> 
        &nbsp;&nbsp; 
        <button type="button" class="btn btn-outline resetBulkAssignForm"> 
        <span class="glyphicon glyphicon-off"></span> Reset 
        </button> 
        &nbsp;&nbsp; 
        <button type="button" class="btn btn-outline" data-dismiss="modal"> 
        <span class="glyphicon glyphicon-refresh"></span> Close 
        </button> 

       </div> 
       </fieldset> 
      </form> 
      </section> 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 1

改變Select2的底層<select>值後或<input>你必須觸發change事件，因此這種變化將通過Select2代碼處理，並適當地呈現：

$(".bulkAssignForm").find("select").val("").trigger("change"); 

試驗成功上AutoForm Demo test page 。