title: Show Bootstrap Modal Window based on select (DropDown) value
body: <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>