Javascript 根据从下拉列表中选择的数据从数据库中选择数据
我有一个从数据库填充的select元素，当我选择一个元素时，我想显示来自与该行相关的另一列的一些其他数据 例如： 在下拉列表中，我有： 苹果， 香蕉 梨 当我选择苹果时，我想从数据库中选择显示我还有多少苹果的“总计”列 我想，我应该使用Javascript-Ajax吗？或者这是用php实现这一点的另一种方法 提前谢谢Javascript 根据从下拉列表中选择的数据从数据库中选择数据,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个从数据库填充的select元素，当我选择一个元素时，我想显示来自与该行相关的另一列的一些其他数据 例如： 在下拉列表中，我有： 苹果， 香蕉 梨 当我选择苹果时，我想从数据库中选择显示我还有多少苹果的“总计”列 我想，我应该使用Javascript-Ajax吗？或者这是用php实现这一点的另一种方法 提前谢谢 <?php include("db.php"); ?> <!DOCTYPE html> <html> <head> <
<?php include("db.php"); ?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
function myFunction() {
if (document.getElementById('selectid').value == "other") {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "");
x.setAttribute("placeholder", "Write another");
x.setAttribute("class", "input-field col s12");
document.getElementById("myDIV").appendChild(x);
}
}
</script>
</head>
<body>
<div id="myDIV" class="input-field col s4">
<?php
$sql12 = "select * from fruitswhere total>0 && spent=1";
$res1 = mysqli_query($conn, $sql12) or die("Error");
$select = '<select id="selectid" name="name" onchange="myFunction()"><option value = "" disabled selected> Choose </option>';
while($row1 = mysqli_fetch_assoc($res1)) {
$emri = $row1['name'];
// $select.='<option value = "'.$row1['name'].'">'.$row1['name '].'</option>';
$select .= '<option id="my_option" value="'.$name.'">'.$name.'</option>';
}
$select .= '<option value="other">other</option>';
$select .= '</select>';
echo $select;
?>
</div>
<div class="input-field col s4">
<?php
$query2 = "SELECT total FROM fruits WHERE name='$name'";
$res2 = mysqli_query($conn, $query2);
while($row2=mysqli_fetch_assoc($res2)){
$all = $row2['total'];
}
?>
<input name="total" type="number" min="1">
</div>
</body>
</html>
$（文档）.ready（函数（）{
$（'select'）。材料选择（）；
});
函数myFunction（）{
if（document.getElementById（'selectid'）。value==“其他”）{
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文本”）；
x、 setAttribute（“值”，“值”）；
x、 setAttribute（“占位符”、“写入另一个”）；
x、 setAttribute（“类”、“输入字段列s12”）；
document.getElementById（“myDIV”）.appendChild（x）；
}
}
<?php
include('db.php');
$sql = 'SELECT total '.
'FROM fruits '.
'WHERE name="'.mysqli_real_escape_string($_POST['name']).'"';
$result = mysqli_query($conn, $sql);
if ($result != NULL) {
$row = mysqli_fetch_assoc($result);
print($row['total']);
} else {
print(0);
}
die();
$('#selectid').change(function(){
$('#myDiv').html($(this).data('count'));
});
您如何实现它取决于您希望数据的实时性。您好，我发现了一个使用AJAX的解决方案，现在它运行得非常好
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('result');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var fruitName= document.getElementById('selectid').value;
var queryString = "?name=" + fruitName;
ajaxRequest.open("GET", "ajax_totali.php" + queryString,
true);
ajaxRequest.send(null);
}
}
</script>
<body>
<div id="myDIV" class="input-field col s4">
<?php $sql12="select * from fruits";
$res1=mysqli_query($conn,$sql12) or die( "Error");
$select= '<select id="selectid" name="name onchange="ajaxFunction()"><option value="" disabled selected>Choose one fruit</option>';
while ($row1=mysqli_fetch_assoc($res1)){
$select.='<option value="'.$row1['name'].'">'.$row1['name'].'</option>';
}
$select.='</select>';
echo $select; ?>
</div>
<div class="input-field col s4">
<div id='result'></div>
</div>
</body>
</html>
是的，javascript（或者jQurey$.post更简单，IMHO）比ajax更简单。
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('result');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var fruitName= document.getElementById('selectid').value;
var queryString = "?name=" + fruitName;
ajaxRequest.open("GET", "ajax_totali.php" + queryString,
true);
ajaxRequest.send(null);
}
}
</script>
<body>
<div id="myDIV" class="input-field col s4">
<?php $sql12="select * from fruits";
$res1=mysqli_query($conn,$sql12) or die( "Error");
$select= '<select id="selectid" name="name onchange="ajaxFunction()"><option value="" disabled selected>Choose one fruit</option>';
while ($row1=mysqli_fetch_assoc($res1)){
$select.='<option value="'.$row1['name'].'">'.$row1['name'].'</option>';
}
$select.='</select>';
echo $select; ?>
</div>
<div class="input-field col s4">
<div id='result'></div>
</div>
</body>
</html>
<?php
include('db.php');
$sql = 'SELECT total '.
'FROM fruits'.
'WHERE name="'.$_GET['name'].'"';
$result = mysqli_query($conn, $sql);
if ($result != NULL) {
$row = mysqli_fetch_assoc($result);
// print($row['total']);
$result=$row['total'];
echo "<div style='color:red'>.$result.</div>";
} else {
print(0);
}
die();
?>