通过上一个选择确定下一个选择菜单


Determining next selection menu by previous selection

>我有 3 个选择下拉列表,当第一个被选中时,第二个出现,当第二个被选择时,第三个出现,使用 if(isset($_post[first_one])) 和第三个使用 if(isset($_post[second_one]))

.SQL:

$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * FROM sp_meeting_log ";
$result1 = $conn->query($sql);

PHP/HTML:

<div style="position:absolute; top:300px; left:500px;">
    <form method="post">
        <p>Choose:</p>
        <!--Get all orgs ,forums ,Users data available for admin-->
        //select the first
        <select style="display:inline-block;" name="org">
            <option value="All Orgs">All Orgs</option>
            //first drop down info release
            <?php
            if ($result1->num_rows > 0) {
                echo "<table><tr><th>orgID</th><th>orgName</th></tr>";
                // output data of each row
                while($row = $result1->fetch_assoc()) {
                    echo "<option>" .$row["orgID"]." /".$row["orgName"]."</option>";
                }
                echo "</table>";
            } else {
                echo "0 results";
            }
            ?>
        </select>
        <select style="display:inline-block;" name="forum">
            <option value="forum1"><h5>All Forums</h5></option>
            <?php
            // if the first dropdown post set
            if(isset($_POST['org'])){  
                $result2 = $conn->query($sql);
                if ($result2->num_rows > 0) {
                    echo "<table><tr><th>forumID</th><th>forumName</th></tr>";
                    // output data of each row
                    while($row = $result2->fetch_assoc()) {
                        echo "<option>".$row["forumID"]." / ".$row["forumName"]."</option>";
                    }
                    echo "</table>";
                } else {
                    echo "0 results";
                }
            }
            ?>
        </select>
        //select the second
        <select style="display:inline-block;" name="user">
            <option><h5>All Users</h5></option>
            <?php
            // if the second drop down is set
            if(isset($_POST['forum'])){
                $result3 = $conn->query($sql);
                if ($result3->num_rows > 0) {
                    echo "<table><tr><th>userID</th><th>username</th></tr>";
                    // output data of each row
                    while($row = $result3->fetch_assoc()) {
                        echo "<option>".$row["userID"]." / ".$row["username"]. "</option>";
                    }
                    echo "</table>";
                } else {
                echo "0 results";
            }
        }
        ?>

本质上这就是这个想法。您希望第一页只是从第二页获取并将结果发布回第一页的正确位置:

页1.php

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form>
    <label>Org
        <select id="org" name="org">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </label>
    <!-- This is where the forum html will drop into after ajax runs -->
    <div id="forum"></div>
    <!-- This is where the user html will drop into after ajax runs -->
    <div id="user"></div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        // On change of a select menu
        $(this).on('change','select',function(e){
            // Assign selection
            var thisSelect  =   $(this);
            // Get the id name, this will tell page two
            //  what it's receiving
            var sendType    =   thisSelect.attr('id');
            // Get the actual value of the selection 
            var sendVal     =   thisSelect.val();
            // Create essentially a POST
            var sendData    =   { field: sendType, value: sendVal };
            $.ajax({
                // Send to page 2
                url : '/page2.php',
                // Use post method
                type: "POST",
                // Use post data from above
                data : sendData,
                // This is what will run on success
                success:function(response){
                    // Parse the json coming back for placement
                    var jSon    =   JSON.parse(response);
                    // Save the correct html into the correct drop spot
                    $('#'+jSon.type).html(jSon.html);
                },
                error: function(response){
                    console.log(response);
                }
            });
        });
    });
</script>

页2.php

if(!empty($_POST)) {
    $data   =   '';
    ob_start();
    if(isset($_POST['field'])) {
        if($_POST['field'] == 'org') {
            $type   =   'forum';
?>
    <label>Forum
        <select id="forum" name="forum">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </label>
<?php
    }
    elseif($_POST['field'] == 'forum') {
        $type   =   'user';
?>
    <label>user
        <select id="user" name="user">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </label>
<?php   }
        $data   =   ob_get_contents();
        ob_end_clean();
        die(json_encode(array('type'=>$type,'html'=>$data)));
    }
    die(json_encode(array('type'=>'error','html'=>false)));
}