Show Bootstrap Modal Window based on select (DropDown) value

Question

I have code that when an option within select drop down is chosen the proper bootstrap window appears. Yet my script is not easy to maintain. I have to add to my script with each new drop down option that is added.

What would be a more efficient way to write the following script? It would be more useful if I did not need to add to it with each new dropdown option and modal window added to the 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

If the values of your select options is the relevant selector (#modalId) of the modal, you can use:

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

Answer 2

If some options do not trigger a modal like the first one, you can do this:

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

Just make sure you use any case-permutation of the word modal in your id selectors that do trigger a 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>