ブートストラップマルチセレクションスクロールバーのドラッグがブートストラップモーダルで動作しない

Question

ブートストラップモーダルでブートストラップマルチセレクトを使用しようとしています。私はそれを初期化することができ、それを完全に問題なくレンダリングすることができます。私は、モーダルの内側にスクロールバーをドラッグしようとすると、ドロップダウンが閉じてしまう、本当に厄介な問題に直面しています。私はブートストラップモーダルの外で同じコードを試してみましたが、完全に動作します。私はこの問題を示すjsFiddleを作成しました。

通常のスクロールは正常ですが、モーダルでスクロールバーをドラッグするとドロップダウンが閉じます。この問題を解決する方法はありますか？ここで

JSFiddle Link

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<select id="example-multiple-selected1" multiple="multiple"> 
    <option value="1">Option 1</option> 
    <option value="2" selected="selected">Option 2</option> 
    <!-- Option 3 will be selected in advance ... --> 
    <option value="3" selected="selected">Option 3</option> 
    <option value="4">Option 4</option> 
    <option value="5">Option 5</option> 
    <option value="6">Option 6</option> 
</select> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <select id="example-multiple-selected" multiple="multiple"> 
      <option value="1">Option 1</option> 
      <option value="2" selected="selected">Option 2</option> 
      <!-- Option 3 will be selected in advance ... --> 
      <option value="3" selected="selected">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
      <option value="6">Option 6</option> 
     </select> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
<script> 
    $('#example-multiple-selected').multiselect({ 
      maxHeight: 100 
    }); 
    $('#example-multiple-selected1').multiselect({ 
      maxHeight: 100 
    }); 
</script> 

Answer 1

はあなたのソリューションです：

$('.modal').on('mousedown mouseup click', '.multiselect-container', function(e) { 
    e.preventDefault(); 
}); 

ワーキングJsfiddle：https://jsfiddle.net/scooterlord/hdnf9x61/10/