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

你应该隐藏它们然后显示所选的一个。 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>

使用JQuery隐藏并显示基于下拉选择的div

1 个答案: