使用JQuery根據下拉選擇隱藏和顯示div

Question

我試圖隱藏一個下拉框並顯示一組特定的div（其類和id相同）。

下拉列表的值對應於div的名稱

我的嘗試：

<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

您應該全部隱藏它們，然后顯示所選的一個。 例如：

 $(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>