title: Open form based on input from select
body: <p>Is there a way to open a form based on input from Form Control Select in Bootstrap 3?</p>
  
  <p>I have 3 forms on a page and would like to display the form based on value (id) from the first select tag.</p>
  
  <p>Have seen this done before, but can't find the page, no luck on Google either (maybe bad search terms).
  Thinking this can be done by hiding the forms until it's called.</p>
  
  <p>There's also the option of using Modal, but I prefer having it all on one page for this particular matter.</p>
  
  <p>UPDATE
  Still can't display forms, even though @Mat's suggestion works on jsFiddle. Uploading file in hope that someone can spot the error.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Testpage&lt;/title&gt;
  
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  //$('#myModal').modal('show');
  
  $('#formSel').change( function() {
  var id = $(this).val();
  if( id != '-' )
  {
      $('form').hide();
      $('#form'+id).show();
      $('#myModal').modal('show');
  }
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;select id="formSel"&gt;
   &lt;option value="-"&gt;Select a form&lt;/option&gt;
   &lt;option value="1"&gt;Form 1&lt;/option&gt;
   &lt;option value="2"&gt;Form 2&lt;/option&gt;
   &lt;option value="3"&gt;Form 3&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="myModal" class="modal fade"&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" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
      &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;form id="form1"&gt;&lt;input type="text" value="form 1" /&gt;&lt;/form&gt;
      &lt;form id="form2"&gt;&lt;input type="text" value="form 2" /&gt;&lt;/form&gt;
      &lt;form id="form3"&gt;&lt;input type="text" value="form 3" /&gt;&lt;/form&gt;
   &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>