javascript - 根据选择(下拉)值显示 Bootstrap 模态窗口

Question

I have code that when an option within select drop down is chosen the proper bootstrap window appears.然而我的脚本并不容易维护。我必须将添加的每个新下拉选项添加到我的脚本中。

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

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

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