显示引导模式窗口基于选择(下拉)值

Show Bootstrap Modal Window based on select (DropDown) value

本文关键字：选择 下拉 于选择 模式 窗口 显示      更新时间：2023-09-26

我有代码，当选择下拉菜单中的选项时，会出现适当的引导窗口。然而，我的脚本不容易维护。我必须添加到我的脚本与添加的每个新的下拉选项。

写下面的脚本更有效的方法是什么?如果我不需要在HTML中添加每个新的下拉选项和模态窗口，那么它将更有用。

  $("#selectbox").change(function () {
    if ($(this).val() == "#myModal") {
        $('#myModal').modal('show');
      }
    if ($(this).val() == "#myModal2") {
        $('#myModal2').modal('show');
      }
    if ($(this).val() == "#myModal3") {
        $('#myModal3').modal('show');
      }
  });
<select class="form-control" id="selectbox">
                  <option value="#">
                    Find: App Support
                  </option>
                  <option value="#myModal">
                    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>

如果选择选项的值是modal的相关选择器(#modalId)，则可以使用:

$("#selectbox").change(function () {
    $( $(this).val() ).modal('show');
})

如果有些选项不像第一个那样触发模态，你可以这样做:

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

只要确保在你的id选择器中使用了modal这个词的大小写排列就可以触发一个模态。

JSFIDDLE 

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

相关文章：