Сброс модальных данных с бутстрапом + JQuery

Question

У меня есть MVC 5 C# проекта с использованием Бутстрапом bootstrap-transition.js v2.3.1 с bootstrap-modal.js v2.2.0, JQuery jQuery JavaScript Library v2.1.3 и, наконец, Select2 Version: 3.5.2.

В этом проекте у меня есть модальное со следующей информацией:

<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4> 
      </div> 
      <div class="modal-body" data-val="@Model.packageId"> 
       <form class="form-horizontal"> 
        <div class="control-group"> 
         <label class="control-label">Package Name: </label> 
         <div class="controls"> 
          <input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder" value="@Model.pkgNameValue"> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="control-label">Select the materials:</label> 
         <div class="controls"> 
          <input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" /> 
         </div> 
        </div> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button> 
      </div> 
     </div> 
    </div> 
</div> 

И в cshtml я вынести модели с использованием этих двух линий:

ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true); 
    Html.RenderPartial("_ModalPackagePopup", createModal); 

Когда я открываю модальный в первый раз, он пуст, что хорошо. Однако, если я меняю одно из полей, закройте его и снова откройте его, старая информация все еще там. Я хочу избежать такого поведения, я хочу сбросить информацию о модальном состоянии, когда он закрыт.

Для достижения этой цели я попытался каждое решение в этой дискуссии, но без успеха:

• how to destroy bootstrap modal window completely?

Изменение поля имя пакета опустошить легко, я просто $(#createPkgModal input#package-name).val('') и его работает, однако это изменение не влияет на другое поле, которое использует select2.

Как я могу исправить это и сбросить данные модала каждый раз, когда я его закрою?

Answer 1

Может быть много способов, с помощью которых можно сбросить данные модального файла, однако я использовал только jQuery и вручную сбросил каждое поле, используя $(#fieldId).val('');.

В случае выбор2, я должен был использовать вариант в selecte для этого: $('#fieldId').select2('data', null);