在php中使用javascript以使選擇框可見

Question

我正在使用php，並希望基於我選擇的選擇框變得可見。 我的html代碼是

<form name="frmIndex" action="index.php" method="post">
    <select name="ddlSelections">
        <option value="1">Tickets</option>
        <option value="2">Projects</option>
        <option value="3">Sales</option>
    </select>
    <input type="submit" value="Select" name="btnSubmit"/><br/>
    <select name="ddlTickets" style="display:none">
        <option value="1">Open Tickets</option>
        <option value="2">Waiting for Client</option>
        <option value="3">Overdue</option>
        <option value="4">Average Age</option>
    </select>
    <select name="ddlProjects" style="display:none">
        <option value="1">Ready to Bill</option>
        <option value="2">Over Budget</option>
        <option value="3">Overdue</option>
        <option value="4">Assigned per PM</option>
    </select>
    <select name="ddlSales" style="display:none">
        <option value="1">Leads last 7/30/90</option>
        <option value="2">Open</option>
        <option value="3">Expected Value (30 days)</option>
        <option value="4">Overdue</option>
    </select>
    <input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

到目前為止，我的php代碼是

 <?php

    if(isset($_POST["btnSubmit"])) 
    {
        $selection = $_POST["ddlSelections"];   

        if ($selection == 1) {

        }
        else if ($selection == 2) {

        }
        else {

        }
    }

?>

所以我的問題是，如果if / else語句內部的javascript看起來像什么，使選擇框可見？

Answer 1

為什么不使用JavaScript在客戶端？

    <form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
    <option value="1">Tickets</option>
    <option value="2">Projects</option>
    <option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets"  id="ddlTickets"> <!-- visible by default -->
    <option value="1">Open Tickets</option>
    <option value="2">Waiting for Client</option>
    <option value="3">Overdue</option>
    <option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
    <option value="1">Ready to Bill</option>
    <option value="2">Over Budget</option>
    <option value="3">Overdue</option>
    <option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
    <option value="1">Leads last 7/30/90</option>
    <option value="2">Open</option>
    <option value="3">Expected Value (30 days)</option>
    <option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

javascript

<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
    case "1":
    document.getElementById('ddlTickets').style.display = "block";
    break;
    case "2":
    document.getElementById('ddlProjects').style.display = "block";
    break;
    case "3":
    document.getElementById('ddlSales').style.display = "block";
    break;

}
}
</script>

如果必須使用PHP

<form name="frmIndex" action="index.php" method="post">


 <?php

if(isset($_POST["btnSubmit"])) 
{
    $selection = $_POST["ddlSelections"];   

    if ($selection == 1) {
        /* echo these
  <select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
          <select name="ddlTickets" style="display:none">
    <option value="1">Open Tickets</option>
    <option value="2">Waiting for Client</option>
    <option value="3">Overdue</option>
    <option value="4">Average Age</option>
    </select>
      */
      }
       else if ($selection == 2) {
           /* echo these
   <select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
         <select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
    */
      }
     else {
    /* echo these
         <select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
   </select>   <input type="submit" value="Select" name="btnSubmit"/><br/>
          <select name="ddlSales" style="display:none">
    <option value="1">Leads last 7/30/90</option>
    <option value="2">Open</option>
    <option value="3">Expected Value (30 days)</option>
    <option value="4">Overdue</option>
</select>
    */
    }
}

?>


<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

Answer 2

一個使用jQuery的.change()簡短示例，它比on*屬性（如onclick ， onchange等.change()更加醒目 。

用class="subDDL"替換所有style="display:none" ，然后簡單地用.subDDL{display: none;}樣式。 我確實為默認選項保留了一個style="display:initial" 。

然后將一個id添加到與ddlSelections的值相對應的子列表中

現在您只需要一個提交按鈕

 $("[name='ddlSelections']").change(function(){ $(".subDDL").hide(); $('#' + $("[name='ddlSelections'] option:selected").val()).show(); }); 

 .subDDL{ display: none; } 

 <script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <form name="frmIndex" action="index.php" method="post"> <select name="ddlSelections"> <option value="1">Tickets</option> <option value="2">Projects</option> <option value="3">Sales</option> </select> <select id="1" name="ddlTickets" class="subDDL" style="display:initial"> <option value="1">Open Tickets</option> <option value="2">Waiting for Client</option> <option value="3">Overdue</option> <option value="4">Average Age</option> </select> <select id="2" name="ddlProjects" class="subDDL"> <option value="1">Ready to Bill</option> <option value="2">Over Budget</option> <option value="3">Overdue</option> <option value="4">Assigned per PM</option> </select> <select id="3" name="ddlSales" class="subDDL"> <option value="1">Leads last 7/30/90</option> <option value="2">Open</option> <option value="3">Expected Value (30 days)</option> <option value="4">Overdue</option> </select> <input type="submit" value="Submit" name="btnChoose" /> </form>