Show Bootstrap Modal Window based on select (DropDown) value
<p>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. </p>

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  $("#selectbox").change(function () {
    if ($(this).val() == "#myModal") {
        $('#myModal').modal('show');
      }
    if ($(this).val() == "#myModal2") {
        $('#myModal2').modal('show');
      }
    if ($(this).val() == "#myModal3") {
        $('#myModal3').modal('show');
      }
  });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control" id="selectbox"&gt;
                  &lt;option value="#"&gt;
                    Find: App Support
                  &lt;/option&gt;

                  &lt;option value="#myModal"&gt;
                    Apple Pear Company
                  &lt;/option&gt;
                  
                  &lt;option value="#myModal2"&gt;
                    Cold Brewing Company
                  &lt;/option&gt;
                  
                  &lt;option value="#myModal3"&gt;
                   Jokers Wild Inc.
                  &lt;/option&gt;
  &lt;/select&gt;


  &lt;div id="myModal1" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt; 
                &lt;h4 class="modal-title"&gt;Apple Pear Company&lt;/h4&gt;
            &lt;/div&gt;
        &lt;div class="modal-body info"&gt;
                &lt;p&gt;Lorem lipsum 
            &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer addHEIGHT"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="myModal2" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt; 
                &lt;h4 class="modal-title"&gt;Cold Brewing Company&lt;/h4&gt;
            &lt;/div&gt;
        &lt;div class="modal-body info"&gt;
                &lt;p&gt;Lorem lipsum&lt;/p&gt; 
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="myModal3" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt; 
                &lt;h4 class="modal-title"&gt;Jokers Wild Inc.&lt;/h4&gt;
            &lt;/div&gt;
        &lt;div class="modal-body info"&gt;
                &lt;p&gt;Lorem Lipsum&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>