我一直在努力解决这个问题,作为最后的手段,我在这里寻求帮助。 我正在使用选项标签来显示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>
答案 0 :(得分:0)
刷新页面时恢复所选选项..尝试
1.从DB中获取数据以在加载页面时选择默认选项。 (如果将选项值存储在DB中)。
答案 1 :(得分:0)
经过大量测试后,这是符合目的的代码。 它可能会帮助其他用户。
<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>