当我单击下拉列表中的一个值时，我试图显示我的表格。当我查看页面代码源时，表格值在那里但没有显示。我想使用下拉列表中的值从 mysql 进行查询，并使用 mysql 查询中的数据填充表。
这是我的代码:
<!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>
原来，在我的其他网页中，php代码在body里面。但是这一次，如果我使用下拉菜单，我无法让它工作，所以这就是为什么我把它放在函数中以便我能够使用 onchange 函数。我已经阅读了一些使用 AJAX 或 JSON 的答案，但我对这些不熟悉，所以如果可能的话，我只想使用 javascript，因为这可能是最简单的方法。
最佳答案
您在这里尝试做的是在浏览器中运行 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>
关于javascript - Html 下拉菜单不显示任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35806773/