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

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> 

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';
        }

    }