用戶從列表中選擇一個選項而不單擊提交按鈕后，如何在頁面中顯示文本框或選擇/選項？

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

    }