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

在CSS的少许帮助下，我已经认真地更改了HTML并为其编写了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>

Answer 2

如果我正确理解您的要求，则当用户选择某些选项时，您希望另一个选择列表或文本区域出现在当前选择列表下。当他选择Rand或Department时选择列表，在所有其他情况下选择textarea。我要做的是使您需要这些额外的元素（另一个选择列表和textarea），并使其显示：无。然后使用onchange事件处理程序，该函数将检查选择了哪个选项并显示/隐藏所需的内容。对于第一个选择列表中的每个选项，您将需要一个额外的选择列表，但是如果您是数据库中的选项，则可以使用ajax根据用户选择的内容来动态填充单个选择列表。希望这可以帮助。

onchange就像：

onchange='displayList(this)'

函数看起来像这样：

function displayList(selectObject){

        var option = selectObject.value;

        if(option == 'Department' || option == 'Rank'){
            document.getElementById('select').style.display='inline';
            document.getElementById('text').style.display='none';
        }
        else{
            document.getElementById('select').style.display='none';
            document.getElementById('text').style.display='inline';
        }

        if(option == 'Select'){
            document.getElementById('select').style.display='none';
            document.getElementById('text').style.display='none';
        }

    }

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

2 个答案: