モーダルウィンドウのブートストラップドロップダウン問題

Question

ドロップダウンから値を選択したときにモーダルウィンドウに値を選択したときにブートストラップをドロップダウンしましたが、「X」をクリックしてモーダルウィンドウを閉じた後、モデルのポップアップがポップアップされていません。ここで

$("#selectbox").on("change", function() { 
 
     var sOptionVal = $(this).val(); 
 
     if (/modal/i.test(sOptionVal)) { 
 
     var $selectedOption = $(sOptionVal); 
 
     $selectedOption.modal('show'); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<select class="form-control" id="selectbox"> 
 
     <option value="#"> 
 
     Find: App Support 
 
     </option> 
 
    
 
     <option value="#myModal1"> 
 
     Apple Pear Company 
 
     </option> 
 
    
 
     <option value="#myModal2"> 
 
     Cold Brewing Company 
 
     </option> 
 
    
 
     <option value="#myModal3"> 
 
     Jokers Wild Inc. 
 
     </option> 
 
    </select> 
 
    
 
    
 
    <div id="myModal1" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">×</button> 
 
      <h4 class="modal-title">Apple Pear Company</h4> 
 
      </div> 
 
      <div class="modal-body info"> 
 
      <p>Lorem lipsum 
 
      </p> 
 
      </div> 
 
      <div class="modal-footer addHEIGHT"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div id="myModal2" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">×</button> 
 
      <h4 class="modal-title">Cold Brewing Company</h4> 
 
      </div> 
 
      <div class="modal-body info"> 
 
      <p>Lorem lipsum</p> 
 
      </div> 
 
      <div class="modal-footer"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    <div id="myModal3" class="modal fade" role="dialog"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">×</button> 
 
      <h4 class="modal-title">Jokers Wild Inc.</h4> 
 
      </div> 
 
      <div class="modal-body info"> 
 
      <p>Lorem Lipsum</p> 
 
      </div> 
 
      <div class="modal-footer"></div> 
 
     </div> 
 
     </div> 
 
    </div>

私はjsfiddleを添付しています。

https://jsfiddle.net/rickyruizm/u20hujev/

Answer 1

あなたが必要とするこの場合、モーダル

$("#selectbox").on("change blur", function() { 
    var sOptionVal = $(this).val(); 
    if (/modal/i.test(sOptionVal)) { 
    var $selectedOption = $(sOptionVal); 
    $selectedOption.modal('show'); 
    } 
}); 

https://jsfiddle.net/u20hujev/13/

Answer 2

その後、ぼかしにそれが表示される変更を使用して、オプションが以前と同じ選択されているので、もし、両方のイベントをぼかすことができますxをクリックすると、選択をリセットします。同じoptionをクリックしようとすると、現在はselectedであるため、イベントは発生しません。

このオプションを再度選択すると、モーダルを表示するようになります。

$("#selectbox").on("change", function() { 
    var sOptionVal = $(this).val(); 
    if (/modal/i.test(sOptionVal)) { 
    var $selectedOption = $(sOptionVal); 
    $selectedOption.modal('show'); 
    } 
}); 

$("button.close").click(function(){ 
    $("select#selectbox").val($("select#selectbox option:first").val()); 
}); 

フィドル：https://jsfiddle.net/qaeed/u20hujev/16/

Answer 3

このを試してみてください。 Bootstrap modal close then selectedオプションは、オプションを削除してもう一度追加します。このトリックを使うことができます。

希望があなたを助けます。

$("#selectbox").on("change", function() { 
 
    var sOptionVal = $(this).val(); 
 
    if (/modal/i.test(sOptionVal)) { 
 
    var $selectedOption = $(sOptionVal); 
 
    $selectedOption.modal('show'); 
 
\t } 
 
}); 
 

 
$('.modal').on('hidden.bs.modal', function (e) { 
 
\t var getValueOnClose = $("#selectbox :selected").text(); 
 
\t $("#selectbox :selected").remove(); 
 
\t $("#selectbox :selected").text(getValueOnClose); 
 
\t $("#selectbox").append('<option value="#'+this.id+'">'+getValueOnClose+'</option>'); 
 
\t $("#selectbox option:first").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<br><br> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-4"> 
 
\t  <select class="form-control" id="selectbox" value="10"> 
 
\t  \t <option value="#" hidden></option> 
 
\t \t \t <option value="#" selected="selected">Find: App Support</option> 
 
\t \t \t <option value="#myModal1"> 
 
\t \t \t  Apple Pear Company 
 
\t \t \t </option> 
 
\t \t \t <option value="#myModal2"> 
 
\t \t \t  Cold Brewing Company 
 
\t \t \t </option> 
 
\t \t \t <option value="#myModal3"> 
 
\t \t \t  Jokers Wild Inc. 
 
\t \t \t </option> 
 
\t \t \t </select> 
 
\t </div> 
 
\t </div> 
 
</div> 
 

 
<div id="myModal1" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     <h4 class="modal-title">Apple Pear Company</h4> 
 
     </div> 
 
     <div class="modal-body info"> 
 
     <p>Lorem lipsum 
 
     </p> 
 
     </div> 
 
     <div class="modal-footer addHEIGHT"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="myModal2" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     <h4 class="modal-title">Cold Brewing Company</h4> 
 
     </div> 
 
     <div class="modal-body info"> 
 
     <p>Lorem lipsum</p> 
 
     </div> 
 
     <div class="modal-footer"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="myModal3" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">×</button> 
 
     <h4 class="modal-title">Jokers Wild Inc.</h4> 
 
     </div> 
 
     <div class="modal-body info"> 
 
     <p>Lorem Lipsum</p> 
 
     </div> 
 
     <div class="modal-footer"></div> 
 
    </div> 
 
    </div> 
 
</div>