Question

我正在用PHP编写注册页面：

<form action="" method="post">
            <input type="text" id="lname" name="fname" placeholder="First Name" required>
            <input style='margin:8px;'type="text" id="fname" name="lname" placeholder="Last Name" required>
            <br>
            <br>
            <input type="emailtext" id="email" name="email" placeholder="Email Address" required>
            <br>
            <div class="selectdiv" required>
                <p class="boldlabel">I am a</p>

                <input type="radio" id="tutor" name="tutororstudent" value="tutor" required>
                <label for="tutor">Tutor</label><br>

                <input type="radio" id="student" name="tutororstudent" value="student">
                <label for="student">Student</label><br>

                <div class="innerdiv">
                    <p class="boldlabel">Grade level</p>
                    <select name="grade">
                      <option value="1">1st Grade</option>
                      <option value="2">2nd Grade</option>
                      <option value="3">3rd Grade</option>
                      <option value="4">4th grade</option>
                      <option value="5">5th Grade</option>
                      <option value="6">6th Grade</option>
                      <option value="7">7th Grade</option>
                      <option value="8">8th grade</option>
                      <option value="9">9th Grade</option>
                      <option value="10">10th Grade</option>
                      <option value="11">11th Grade</option>
                      <option value="12">12th grade</option>
                      <option value="13">Undergrad/grad</option>
                      <option value="14">Post College</option>
                    </select>
                </div>
            </div>
            <input style='margin:16px;'type="password" id="pwd" name="pwd" placeholder="Password" required>
            <input type="submit" value="Register">
   </form>

我希望仅当用户选择了学生单选按钮时才显示div“ innerdiv”。如何在PHP中做到这一点？在用户选择学生单选按钮之前，如何隐藏它？

Answer 1

您只能使用javascript来实现：将id添加到您的innerdiv中。

            <div class="innerdiv" id="innerdiv" style="display:none">
                <p class="boldlabel">Grade level</p>
                <select name="grade">
                  <option value="1">1st Grade</option>
                  <option value="2">2nd Grade</option>
                  <option value="3">3rd Grade</option>
                  <option value="4">4th grade</option>
                  <option value="5">5th Grade</option>
                  <option value="6">6th Grade</option>
                  <option value="7">7th Grade</option>
                  <option value="8">8th grade</option>
                  <option value="9">9th Grade</option>
                  <option value="10">10th Grade</option>
                  <option value="11">11th Grade</option>
                  <option value="12">12th grade</option>
                  <option value="13">Undergrad/grad</option>
                  <option value="14">Post College</option>
                </select>
            </div>

页面底部，请输入以下内容：

<script>
    let student = document.getElementById('student');
    student.addEventListener('click', display);
    let tutor = document.getElementById('tutor');
    tutor.addEventListener('click', () => div.style.display = "none");


    let div = document.getElementById('innerdiv');

    function display(){
        if(student.checked) {
            div.style.display = "block";
         }
    }
</script>

隐藏和显示HTML选择选项

1 个答案: