如何显示所选年份的两个不同列

Question

I do not know how will I display the position and names of the officers from year selected by the user.

Edit:

I used ajax now, but I'm still having a problem. When I click the combobox and select a year, the officers still don't show up. Only the table with the header Position and Name that shows up, but no data from my database under those columns.

getyear.php

<?php
$q = strval($_GET['q']);

$con = mysqli_connect('localhost','root','','test');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM officers WHERE year = '".$q."'";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Position</th>
<th>Name</th>

</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['position'] . "</td>";
    echo "<td>" . $row['name'] . "</td>";

    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>

main.php

<form>
<?php
    mysql_connect("localhost","root","");
    mysql_select_db("test");
    $sql = "SELECT DISTINCT year FROM officers ORDER BY year DESC";
    $result = mysql_query($sql);

    /* assign an onchange event handler */
    echo "<select name='year' onchange='showofficers(this.value)'>";
    while ($row = mysql_fetch_array($result)) {
         echo "<option value='" . $row['year'] ."'>" . $row['year'];
    }   
    echo "</select> <br>";
    ?>
    <div id="txtHint">
    </div>
</form>
<script>
    /* event handler ~ no ajax function shown */
    function showofficers(str){
        if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","getyear.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>

Answer 1

some pseudo-code o give you an idea of how you could achieve the desired goal.

<?php
    mysql_connect("localhost","root","");
    mysql_select_db("test");
    $sql = "SELECT DISTINCT year FROM officers ORDER BY year DESC";
    $result = mysql_query($sql);

    /* assign an onchange event handler */
    echo "<select name='year' onchange='showofficers(this.value)'>";
    while ($row = mysql_fetch_array($result)) {
         echo "<option value='" . $row['year'] ."'>" . $row['year'];
    }   
    echo "</select> <br>";

?>


<script>
    /* event handler ~ no ajax function shown */
    function showofficers( value ){
        /* 
            use ajax to send a request that fetches the officers details
            based upon the year selected. Preferred method=POST for ajax query
        */
        alert( 'send '+value+' via ajax, build the sql query and use the ajax callback to generate the new html content' );
    }
</script>


<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        /* Intercept and process ajax request */

        /* the year is POSTed by ajax */
        $year = $_POST['year'];

        $sql='select * from table where year='.$year;

        $res=$db->query( $sql );

        if( $res ){
            /* process recordset and send back response */
        }
    }
?>