选项选择的默认设置

Question

我已经尝试了数周的时间来解决这个问题，作为最后的选择，我在这里寻求帮助。 我正在使用选项标签显示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>

Answer 1

在刷新页面时恢复所选的选项。

1.加载页面时，从数据库获取数据以选择默认选项。 （如果将选项值存储在DB中）。

2. 或使用会话或cookie临时存储所选数据。 并选择默认选项wr来访问会话或cookie数据。

Answer 2

经过大量测试，这是适合目的的代码。 它可能会帮助其他用户。

<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>