Bootstrap modal模態框關閉時，combobox input下拉框仍然保留在頁面上

問題描述：

當點擊模態框的關閉按鈕時，下拉框中的內容沒有消失，而是移動到了頁面左上角

 

分析：這個問題的定位在因而用的哪一種模態框，bootstrap和easyui均可以實現模態框，可是兩個方法實現的模態框下事件的處理方法是不一樣的

此處模態框是用bootstrap實現的，頁面代碼爲：

<div class="modal fade" id="moveStockToBrandModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      @await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = "Move to Brand?" })
      <div class="modal-body">
        <div class="row" style="padding-top:8px">
          <div class="col col-xs-12"><label>Select folder</label></div>
        </div>
        <div class="row">
          <div class="col col-xs-9">
            <div class="input-group" id="stockToBrandSelectInputGroup">
              <select id="stockToBrandFolderSelectCombobox" name="Folder" selected="false" hasDownArrow="false" data-options="prompt:'Search folders...'" style="width:100%; height:34px"></select>
            </div>
          </div>
          <div class="col col-xs-3" style="padding-left:5px;"><input type="button" id="btnMoveStockToBrandFolder" class="btn btn-primary" value="Move" style="width:114px;" disabled /></div>
        </div>

      </div>
    </div>
  </div>
</div>

js代碼爲:

$('#btnMoveStockToBrand').click(function () {
          if (userIsBrandAdmin) {
            $.ajax({
              url: '/Collections/GetBrandFolders',
              type: 'GET',
              dataType: 'json',
              contentType: 'application/json; charset=utf-8',
              success: function (result) {
                $('#stockToBrandFolderSelectCombobox').combobox({
                  valueField: 'id',
                  textField: 'name',
                  data: result.data,
                  onSelect: function (event, ui) {
                    $("#btnMoveStockToBrandFolder").removeAttr('disabled');
                  },
                  onUnselect: function (event, ui) {
                    $("#btnMoveStockToBrandFolder").attr('disabled', 'disabled');
                  }
                });
              }
            });

            $('#moveStockToBrandModal').modal();
          }

        });

解決這個問題須要使用bootstrap modal中的事件處理：show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal,

修改後的代碼爲：

$('#btnMoveStockToBrand').click(function () {
          if (userIsBrandAdmin) {
            $.ajax({
              url: '/Collections/GetBrandFolders',
              type: 'GET',
              dataType: 'json',
              contentType: 'application/json; charset=utf-8',
              success: function (result) {
                $('#stockToBrandFolderSelectCombobox').combobox({
                  valueField: 'id',
                  textField: 'name',
                  data: result.data,
                  onSelect: function (event, ui) {
                    $("#btnMoveStockToBrandFolder").removeAttr('disabled');
                  },
                  onUnselect: function (event, ui) {
                    $("#btnMoveStockToBrandFolder").attr('disabled', 'disabled');
                  }
                });
              }
            });

            $('#moveStockToBrandModal').modal();

            $('#moveStockToBrandModal').on('shown.bs.modal', function () {
              $('#stockToBrandSelectInputGroup').bind('input propertychange', function () {
                $('.panel.combo-p.panel-htop').show();
              });
            }).on('hide.bs.modal', function () {
              $('.panel.combo-p.panel-htop').hide();
            }).on('hidden.bs.modal', function () {
                $('.panel.combo-p.panel-htop').hide();
            })
          }

        });