Javascript Html下拉菜单不显示任何内容
当我在下拉列表中单击一个值时,我正试图显示我的表。当我查看页面代码源代码时,表值在那里,但它没有显示。我想使用下拉列表中的值从mysql查询,并用mysql查询中的数据填充表 这是我的密码:Javascript Html下拉菜单不显示任何内容,javascript,php,jquery,mysql,drop-down-menu,Javascript,Php,Jquery,Mysql,Drop Down Menu,当我在下拉列表中单击一个值时,我正试图显示我的表。当我查看页面代码源代码时,表值在那里,但它没有显示。我想使用下拉列表中的值从mysql查询,并用mysql查询中的数据填充表 这是我的密码: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"hr
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
function jsFunction(value){
<?php
$con=mysqli_connect("localhost","root","","dengue");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM mapping_details where case_type='value'";
echo '<div class="table-responsive ">
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>Barangay</th>
<th>Case Type</th>
<th>Total Dengue Cases</th>
</tr>
</thead>
<tbody>';
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['brgy'] . "</td>";
echo "<td>" . $row['case_type'] . "</td>";
echo "<td>" . $row['total_case_brgy'] . "</td>";
echo "</tr>";
}
echo '</tbody></table></div>';
mysqli_close($con);
?>
}
</script>
</head>
<body>
<select id ="ddl" name="ddl" onchange="jsFunction(this.value);">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</body>
</html>
函数jsFunction(value){
在这里,您要做的是在浏览器中运行PHP代码,这是您无法做到的。所有HTML、CSS和JavaScript都会发送到客户端(您的浏览器),然后由浏览器呈现和初始化。当您调用onchange事件调用jsFunction()时您正试图在该函数中执行PHP,但是-您在chrome或firefox或某些浏览器中运行客户端,无法在那里执行PHP。PHP必须在页面加载时运行,然后可以在发送到客户端之前更改html、css或JavaScript
有两种方法可以实现您的目的。您可以发送Ajax请求(使用javascript调用您的服务器)以获取新数据,或者您可以提交重新加载页面的表单,并且可以像您所熟悉的那样运行PHP—在将html、css和/或javascript返回到客户端(浏览器)之前对其进行修改
这是一种非ajax方式,它只是不断地重新加载页面
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<?php
$value = isset( $_POST['ddl'] ) ? $_POST['dll'] : 1; // we are setting 1 as the default
$con=mysqli_connect("localhost","root","","dengue");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM mapping_details where case_type='{$value}'";
$html= '<div class="table-responsive ">
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>Barangay</th>
<th>Case Type</th>
<th>Total Dengue Cases</th>
</tr>
</thead>
<tbody>';
while($row = mysqli_fetch_array($result))
{
$html.= "<tr>";
$html.= "<td>" . $row['brgy'] . "</td>";
$html.= "<td>" . $row['case_type'] . "</td>";
$html.= "<td>" . $row['total_case_brgy'] . "</td>";
$html.= "</tr>";
}
$html.= '</tbody></table></div>';
mysqli_close($con);
?>
}
</script>
</head>
<body>
<form method="POST" action="">
<select id="ddl" name="ddl">
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
</form>
<script>
$("select#ddl").on("change",function(){
$('form').submit();
});
</script>
<?php echo $html; ?>
</body>
</html>
您的php代码在脚本
标记中使用了echo…我认为它不应该在脚本
标记中,并移动到主体
。您好@Mottie。感谢您指出我的错误。Jon Foley下面的回答不会产生错误,也不会查询任何内容。您能告诉我如何正确执行此操作吗?对不起,我不懂php很好,这很有帮助;但听起来查询代码需要仔细检查。@Mottie:I subject,{$value}没有得到正确的值这就是为什么查询没有得到任何结果,有帮助吗?谢谢!我得到了这个错误:“注意:未定义的索引:第10行C:\xampp\htdocs\Newfolder\testing.php中的dll”。第二件事是,它什么也不返回,我只能看到表头,但其中没有值,所以可能它什么都没有查询。谢谢。我已经解决了问题。现在code是经过测试的代码。它运行良好。现在代码变得更有意义了。希望它能帮助你。一旦它被批准,它就会显示出来。@KamalSingh:嘿,你说的修复方法在哪里?我已经批准了这个答案,因为这是最有帮助的。如果你能提供你自己的答案,我会很高兴。谢谢!