javascript - 当用户从列表中选择选项而不单击提交按钮时，如何在页面中显示文本框或选择/选项？

Question

一旦用户选择军衔或部门，我想在当前下拉列表下方显示另一个下拉列表。从新列表中选择后，用户可以提交表单。

同样，如果用户选择任何其他选项(姓氏除外)，则会出现一个文本框，需要先填写该文本框，然后才能单击提交按钮。

<form action="viewEmployeeHTML.php" method="post">
    <div class="outer-div">
        <div class="inner-div">
            <br><br><br>
            <h2>Search By:</h2>
            <select name="selectionToView" class="SelectBox">
                <option value="Select">-- Select --</option>
                <option value="ID">ID</option>
                <option value="FirstName">First Name</option>
                <option value="MiddleName">Middle Name</option>
                <option value="LastName">Last Name</option>
                <option value="Email">Email</option>
                <option value="Phone">Phone</option>
                <option value="IP_Phone">IP Phone</option>
                <option value="OfficeNumber">Office Number</option>
                <option value="CoordinatorName">Coordinator Name</option>
                <option value="Rank">Rank</option>
                <option value="Department">Department</option>
                <option value="JoiningDate"> Joining Date</option>
                <option value="Committee_AND_Unit">Committee/Unit</option>
            </select><br><br><br>
        </div>
    </div>
    <br><br><br>
    <center><input type="submit" value="VIEW" name="view"></center>
</form>

我尝试了这段代码，但它对我不起作用:

<form action="viewEmployeeHTML.php" method="post">
    <div class="outer-div" >
        <div class="inner-div">
            <br><br><br>
            <h2>Search By:</h2>
            <select name="selectionToView" class="SelectBox" onchange="OnSelectionChange()">
                <option value="Select">-- Select --</option>
                <option value="ID">ID</option>
                <option value="FirstName">First Name</option>
                <option value="MiddleName">Middle Name</option>
                <option value="LastName">Last Name</option>
                <option value="Email">Email</option>
                <option value="Phone">Phone</option>
                <option value="IP_Phone">IP Phone</option>
                <option value="OfficeNumber">Office Number</option>
                <option value="CoordinatorName">Coordinator Name</option>
                <option value="Rank">Rank</option>
                <option value="Department">Department</option>
                <option value="JoiningDate"> Joining Date</option>
                <option value="Committee_AND_Unit">Committee/Unit</option>
            </select>
            <br><br><br>
        </div>
    </div>
    <br><br><br>
    <center><input type="submit" value="VIEW" name="view"></center>
</form>
<script>
    function OnSelectionChange(){
</script>
<?php
    $selectionToView=$_POST['selectionToView']
    if(isset(selectionToView) == "ID"){
?>
<script>document.write("<center><input type="submit" value="VIEW" name="view"></center>");</script>
    <?php
    }
    ?>
<script>
    }
</script>

Answer 1

我稍微更改了 HTML，并在 CSS 的帮助下为其编写了 JavaScript。

function OnSelectionChange(value) {
  document.getElementById("submit-button").disabled = true;
  if ( value == "Rank" ) {
    document.getElementById("rank-select").style.display = "block";
    document.getElementById("department-select").style.display = "none";
    document.getElementById("text").style.display = "none";
  } else if ( value == "Department" ) {
    document.getElementById("rank-select").style.display = "none";
    document.getElementById("department-select").style.display = "block";
    document.getElementById("text").style.display = "none";
  } else if ( value == "Select" ) {
    document.getElementById("rank-select").style.display = "none";
    document.getElementById("department-select").style.display = "none";
    document.getElementById("text").style.display = "none";
  } else {
    document.getElementById("rank-select").style.display = "none";
    document.getElementById("department-select").style.display = "none";
    document.getElementById("text").style.display = "block";
  }
}

function onSecondSelectChange(value) {
  if ( value != "Select" ) {
    document.getElementById("submit-button").disabled = false;
  } else {
    document.getElementById("submit-button").disabled = true;
  }
}

function onTextChange(value) {
  if ( value != "" ) {
    document.getElementById("submit-button").disabled = false;
  } else {
    document.getElementById("submit-button").disabled = true;
  }
}

#rank-select,
#department-select,
#text {
  display: none;
}

<form>
  <div class="outer-div" >
    <div class="inner-div">
      <h2>Search By:</h2>
      <select name="selectionToView" class="SelectBox" onchange="OnSelectionChange(this.options[this.selectedIndex].value)">
        <option value="Select">-- Select --</option>
        <option value="ID">ID</option>
        <option value="FirstName">First Name</option>
        <option value="MiddleName">Middle Name</option>
        <option value="LastName">Last Name</option>
        <option value="Email">Email</option>
        <option value="Phone">Phone</option>
        <option value="IP_Phone">IP Phone</option>
        <option value="OfficeNumber">Office Number</option>
        <option value="CoordinatorName">Coordinator Name</option>
        <option value="Rank">Rank</option>
        <option value="Department">Department</option>
        <option value="JoiningDate"> Joining Date</option>
        <option value="Committee_AND_Unit">Committee/Unit</option>
      </select>
      <select name="rank-select" id="rank-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
        <option value="Select">-- Select --</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
      <select name="department-select" id="department-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
        <option value="Select">-- Select --</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type="text" name="text" id="text" onchange="onTextChange(this.value)">
    </div>
  </div>
      
  <input type="submit" value="VIEW" name="view" id="submit-button" disabled="disabled">
</form>