在下拉选择中显示数据


Display data on dropdown selection

当我从php 的下拉选项中选择一个选项时,我想显示数据库中的数据

<html>
<head>
    <script>
        function showUser(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","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
    <?php
    include("db_connection.php");
    $name="select name from supplier_name";
    ?>
    <form method="POST" action="getuser.php">
        <tr>
            <td>Name</td>
            <td><?php echo "<select name='name'    
                onchange='showUser(this.name)'><option value=''>select 
                name</option>";
                foreach ($con->query(@$name)as $ridyn)
                {
                    echo "<option value='$ridyn[name]'>$ridyn[name]</option>";
                }
                echo"</select>"; ?></td>
            </tr>
        </form>
        <br>
        <div id="txtHint"><b>You have selected......</b></div>
    </body>
    </html>

这里有一个jQuery示例(我对直接的javascript ajax并不太熟悉)。你应该能够从这个例子中填写它。

// Have a function that returns your names
function getSuppliers($con)
    {
        $query  =   $con->query("select `name` from `supplier_name`");
        while($result = $query->fetch(PDO::FETCH_ASSOC)) {
            $row[]  =   $result;
        }
        return (!empty($row))? $row : array();
    }
// Include database con at top
include("db_connection.php");
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    // On menu-change
    $(this).on('change','.ajax_change',function(e){
        $.ajax({
            // Get the url from the action on the form
            url: $('#getUser').attr('action'),
            // Get the value of the dropdown
            data: { value: $(this).val() },
            type: 'post',
            success: function(response) {
                // Print to the text-hint div
                $('#txtHint').html(response);
            }
        });
    });
});
</script>
</head>
<body>
<form method="POST" action="getuser.php" id="getUser">
    <table>
        <tr>
            <td>Name</td>
            <td>
                <select name='name' class="ajax_change">
                    <option value=''>Select name</option>
<?php   foreach(getSuppliers($con) as $ridyn) {
?>                  <option value="<?php echo $ridyn['name']; ?>"><?php echo $ridyn['name']; ?></option>
<?php   }
?>              </select>
            </td>
        </tr>
    </table>
</form>
<br />
<div id="txtHint"><b>You have selected......</b></div>
</body>
</html>