2016-08-30 5 views
0

Ich habe seit Wochen versucht, dieses Problem zu lösen und als letzter Ausweg suche ich hier Hilfe. Ich verwende Options-Tag, um 4 Optionen anzuzeigen. Wenn ich eine Option wähle, wird eine .php-Datei geladen. Der Code, den ich habe, ist nicht zu elegant, aber es funktioniert.Standardeinstellung für Option wählen

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

Alle .php-Dateien haben die gleiche Tabelle, aber verschiedene mysql-Abfragen. Wenn ich die Seite aktualisiere, wird der Block gelöscht und ich muss eine Option erneut auswählen. Ist es möglich, eine Option als Standard zu laden, wenn die Seite geladen wird? Ansonsten habe ich einen leeren Block bevor ich eine Auswahl mache. Ich habe versucht, die Tabelle in dem Block zu haben und jede Datei nur die mysql abfragen, aber das funktioniert nicht. Alle mögliche Vorschläge würden

Für Vollständigkeit geschätzt werden Ich habe die today.php enthalten

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

Antwort

0

Nach vielen Tests ist dies der Code, der den Zweck erfüllt. Es kann anderen Benutzern helfen.

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

die gewählte Option wiederherzustellen, wenn Sie die Seite aktualisieren .. VERSUCHEN

1.Fetch Daten von DB Wählen Sie die Standardoption beim Laden der Seite. (Wenn Sie den Optionswert in DB speichern).

  1. ODER Verwenden Sie Sessions oder Cookies, um die ausgewählten Daten temporär zu speichern. Und wählen Sie die Standardoption für Session- oder Cookie-Daten.
+0

@ safin Danke, aber es hilft nicht viel. Wenn die Seite anfänglich geladen wird, ist der Block leer. Es gibt nichts zu restaurieren. Was ich brauche, ist, dass irgendeine der Tabellen im Block angezeigt wird und nicht eine leere. Wenn ich die erste Option auswähle, passiert nichts aufgrund von 'Änderung' und es wurde keine Änderung vorgenommen. – Colin

+0

Kannst du Cookie verwenden? –

+0

Es gibt nichts zu speichern in dem Cookie, wenn eine Auswahl nicht getroffen wird – Colin