模式窗口的引导下拉问题

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>