模态窗口的Bootstrap下拉问题

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

试试这个。 当Bootstrap模式关闭然后选择的选项将删除并再次附加一个选项。你可以使用这个技巧。

希望帮助你。

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

$('.modal').on('hidden.bs.modal', function (e) {
	var getValueOnClose = $("#selectbox :selected").text();
	$("#selectbox :selected").remove();
	$("#selectbox :selected").text(getValueOnClose);
	$("#selectbox").append('<option value="#'+this.id+'">'+getValueOnClose+'</option>');
	$("#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">
	<div class="row">
		<div class="col-sm-4">
	    <select class="form-control" id="selectbox" value="10">
	    	<option value="#" hidden></option>
			  <option value="#" selected="selected">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>
	</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>

Answer 2

您可以使用更改并模糊两个事件，因此如果选择与之前相同的选项，那么在模糊时它将显示模态

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

Answer 3

在这种情况下，您需要在单击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/u20hujev/13/