title: Displaying conditional Fields in HTML Using A Form Select Menu
body: <p>I am trying to get my page to display different form elements depending on which option is selected from the select menu but i can not get it to work for me</p>
  
  <p>my HTML is</p>
  
  <pre><code> &lt;h3&gt;Register For General Admission&lt;/h3&gt;
  
  &lt;form action="GeneralRegister" method="POST" style="text-align:center"&gt;
  Type Of Ticket: &lt;select name="typeofticket" size="1" id="generalAdmissionList"&gt;
      &lt;option value="1"&gt;&lt;/option&gt;
      &lt;option value="1"&gt;General Admission&lt;/option&gt;
      &lt;option value="1"&gt;General Admission School&lt;/option&gt;
  &lt;/select&gt;
  &lt;br&gt;
  &lt;div id="1"&gt;
      &lt;!--for general admission--&gt;
      First name:
      &lt;input type="text" name="firstname"&gt;
      &lt;br&gt;Last name:
      &lt;input type="text" name="lastname"&gt;
      &lt;br&gt;
  &lt;/div&gt;
  &lt;div id="2"&gt;
      &lt;!--For Schools--&gt;
      School name:
      &lt;input type="text" name="school"&gt;
      &lt;br&gt;
  &lt;/div&gt;
  Email:
  &lt;input type="text" name="email"&gt;
  &lt;br&gt;
  &lt;input type="submit" value="Submit"&gt;
  &lt;br&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and my JavaScript is</p>
  
  <pre><code>$("#generalAdmissionList").change(function () {
  var selected = $("#generalAdmissionList option:selected").form();
  $('div').hide();
  $('#' + selected).show();
  });
  
  $(document).ready(function (e) {
  $('div').hide();
  });
  </code></pre>
  
  <p>any help would be great</p>