Question

我有代码，当选择选择下拉列表中的选项时，会出现正确的引导程序窗口。但我的脚本不容易维护。我必须添加每个新的下拉选项添加到我的脚本。

编写以下脚本的更有效方法是什么？如果我不需要添加每个新的下拉选项和添加到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>

Answer 1

如果您选择的选项的值是#modalId的相关选择器（modal），则可以使用：

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

Answer 2

如果某些选项不像第一个选项那样触发模态，则可以执行以下操作：

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

请确保在id选择器中使用单词模态的任何case-permutation，它会触发模态。

<强> JSFIDDLE

＆＃13;

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

＆＃13;

<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>

＆＃13;

根据select（DropDown）值显示Bootstrap Modal Window

2 个答案: