根据下拉列表的值显示Bootstrap模态窗口

6

我有一段代码,当选中下拉选择框中的一个选项时,会出现正确的Bootstrap窗口。然而我的脚本不易于维护。每次添加新的下拉选项时,我都需要修改我的脚本。

有什么更有效的方法来编写以下脚本?如果不需要为每个新的下拉选项和模态窗口添加内容,那将会更加有用。

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


3
为什么不直接使用$("#selectbox").change(function () {$($(this).val()).modal('show');}) - Dekel
因为我一直在学习 :-) 谢谢,这个方法非常有效! - chaser7016
1
如果选择第一个选项,您将会收到以下错误消息:Uncaught Error: Syntax error, unrecognized expression: # - Ricky Ruiz
2个回答

5
如果你的选择选项值是相关选择器(#modalId)的modal,那么你可以使用以下代码:
$("#selectbox").change(function () {
    $( $(this).val() ).modal('show');
})

你对这个问题有什么想法?http://stackoverflow.com/questions/39171219/show-contents-of-drop-down - chaser7016

2

如果某些选项不像第一个那样触发模态框,您可以这样做:

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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接