Отображать данные в выпадающем списке
Я хочу отображать данные из базы данных, когда я выбираю опцию из выпадающего меню в 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>
Другие решения
Других решений пока нет …