我已经尝试了几个星期来解决这个问题，作为最后的手段，我在这里寻求帮助。我使用选项标签来显示4个选项。当我选择一个选项时，它会加载一个.php文件。我的代码不是很优雅，但它确实可以工作。
<select name="history" class="button">
<option value="1" selected>Today</option>
<option value="2">Yesterday</option>
<option value="3">This Month</option>
<option value="4">This Year</option>
</select>
<div id="txtHint"><b></b></div>
<script>
$('[name="history"]').on('change', function() {
var ajaxMethod = "today.php";
switch($(this).val())
{
case "1":
ajaxMethod = "today.php";
break;
case "2":
ajaxMethod = "yesterday.php";
break;
case "3":
ajaxMethod = "monthly.php";
break;
case "4":
ajaxMethod = "yearly.php";
break;
}
$("#txtHint b").load(ajaxMethod);
});
</script>
所有的。php文件有相同的表，但不同的mysql查询。当我刷新页面时，它清除了块，我必须再次选择一个选项。是否可以在页面加载时加载一个选项作为默认值?否则，在进行选择之前，我有一个空块。我试着在块中有表，每个文件只查询mysql，但这不起作用。如有任何建议，不胜感激。
为了完整起见，我包含了today.php
<?php
$result = mysqli_query($con, "
SELECT max(Tmax), min(Tmin), max(R)
FROM alldata
WHERE DATE(DateTime) = CURDATE()
"
);
while ($row = mysqli_fetch_array($result)) {
$maxTemp = $row['max(Tmax)'];
$minTemp = $row['min(Tmin)'];
$totalRain = $row['max(R)'];
}
?>
<table id="historical">
<tr>
<td>
</td>
<td>
<?php echo 'Maximum'?>
</td>
<td>
<?php echo 'Minimum'?>
</td>
</tr>
<tr>
<td>
<img src="images/temp.png">
</td>
<td>
<?php echo $maxTemp." °C"?>
</td>
<td>
<?php echo $minTemp." °C"?>
</td>
</tr>
<tr>
<td>
<img src="images/rain.png">
</td>
<td>
<?php echo $totalRain." °C"?>
</td>
</tr>
</table>
在刷新页面时恢复选中的选项。试着
1。从DB获取数据，在加载页面时选择默认选项。(如果您将选项值存储在DB中)。
经过大量测试，这是符合目的的代码。它可以帮助其他用户。
<select id="recordsSelector" class="button">
<option value="today" selected>
<?php echo "Today"?>
</option>
<option value="yesterday">
<?php echo "Yesterday"?>
</option>
<option value="thisMonth">
<?php echo "This Month"?>
</option>
<option value="thisYear">
<?php echo "This Year"?>
</option>
</select>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
stationData('<?php echo $defaultStats?>');
function stationData(period){
$(".records").html("");
if(period=="today"){
$("#almanacheading").html("Today");
}
if(period=="yesterday"){
$("#almanacheading").html("Yesterday");
}
if(period=="thisMonth"){
$("#almanacheading").html("This Month");
}
if(period=="thisYear"){
$("#almanacheading").html("This Year");
}
$.ajax({
url : "almanac.php?period="+period,
dataType : 'json',
success : function (json) {
$("#historyTMax").html(json['maxT']);
$("#historyTMin").html(json['minT']);
$("#historyHMax").html(json['maxH']);
$("#historyHMin").html(json['minH']);
$("#historyDMax").html(json['maxD']);
$("#historyDMin").html(json['minD']);
$("#historyPMax").html(json['maxP']);
$("#historyPMin").html(json['minP']);
},
});
}
$("#recordsSelector").change(function(){
period = $(this).val();
stationData(period);
});
$("#recordsSelector").val('<?php echo $defaultStats?>');
</script>