Use JQuery to hide and show a div based on drop down selection

Question

I'm trying to make a dropdown box hide and show a particular set of divs (ofwhich the class and the id are identical).

The values of the drop down correspond to the the name of the divs

My Attempt:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
  $(function () {
        $("#submissionType").change(function () {
          var submission = $(this).val();
            if ($(this).val()) {
                $("#"+submission).show();
            } else {
                $("#"+submission).hide();
            }
        });
    });
  </script>

html:

<select id="submissionType">
              <option>Choose Submission Type</option>
              <option value="member-submission">member-submission</option>
              <option value="researcher-submission">researcher-submission</option>
              <option value="student-submission">student-submission</option>
              <option value="paper-submission">paper-submission</option>
          </select>

<div class ="new-member-background">
  <div class ="member-submission" id="member-submission">
       <form  action="SubmitData.php" method="post">
            <input type="text" name="first" placeholder="First Name" />
              <br/>
            <input type="text" name="last" placeholder="Last Name" />
              <br/>
            <input type="text" name="title" placeholder="Title" />
              <br/>
            <input type="text" name="institution" placeholder="Institution" />
              <br/>
            <input type="number" name="dept_code" placeholder="Department Code" />
              <br/>
            <input type="text" name="division" placeholder="Division" />
              <br />
            <input type="text" name="email" placeholder="Email" />
              <br/>
            <input type="text" name="website" placeholder="Website" />
              <br/>
        <button type="submit" name="submit">Sign Up</button>
      </form>
</div>
/**...Other divs...*/
</div>

Answer 1

You should hide them all and then reveal the selected one. EG:

$(function () {
    //hide them all to begin with. It would be easier if they all shared a classname. You could also do this in CSS)
    $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
    //on change
        $("#submissionType").change(function () {
          var submission = $(this).val();
          //hide them all:
          $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
          //show the selected one
          $("#"+submission).show();
        });
    });

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<select id="submissionType">
              <option>Choose Submission Type</option>
              <option value="member-submission">member-submission</option>
              <option value="researcher-submission">researcher-submission</option>
              <option value="student-submission">student-submission</option>
              <option value="paper-submission">paper-submission</option>
          </select>

<div class ="new-member-background">
  <div class ="member-submission" id="member-submission">
       <form  action="SubmitData.php" method="post">
            <input type="text" name="first" placeholder="First Name" />
              <br/>
            <input type="text" name="last" placeholder="Last Name" />
              <br/>
            <input type="text" name="title" placeholder="Title" />
              <br/>
            <input type="text" name="institution" placeholder="Institution" />
              <br/>
            <input type="number" name="dept_code" placeholder="Department Code" />
              <br/>
            <input type="text" name="division" placeholder="Division" />
              <br />
            <input type="text" name="email" placeholder="Email" />
              <br/>
            <input type="text" name="website" placeholder="Website" />
              <br/>
        <button type="submit" name="submit">Sign Up</button>
      </form>
</div>
/**...Other divs...*/
</div>