模式窗口的引導下拉問題

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

試試這個。 當啓動模式關閉，然後選擇選項將刪除並再次追加一個選項。你可以使用這個技巧。

希望可以幫助你。

$("#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>