JavaScript - HTML-Dropdown-Menü erstellen, das eine JavaScript-Variable ändert

Question

Ich habe eine App mit einem HTML-Dropdown-Menü. Das Dropdown-Menü HTML verfügt über drei Optionen. Die drei Optionen beziehen sich auf die Zeitdimension, in der Daten aus einer Datenbank dargestellt werden. Insbesondere können entweder Daten aus der letzten Stunde oder aus den letzten 30 Minuten oder aus den letzten 15 Minuten angezeigt werden.

Der HTML-Code ist wie folgt:

<select class="form-control input-sm"> 
    <option value="1H" selected>Last Hour</option> 
    <option value="0.5H">Last 30 Mins</option> 
    <option value="0.25H">Last 15 Mins</option> 
</select> 

Der entsprechende JavaScript-Code ist:

.factory('DataService', function ($http, $q, CONFIG, $filter, $timeout, $interval) { 

    var DataService = {}; 
    var baseUrl = CONFIG.API_BASE_URL; 

    DataService.lastHour = function() { 

     return $http.get('/application/attack/from_time/3600'); 
    } 
} 

Offensichtlich ist es der Fall, dass die Drop-Down-Menü funktioniert nicht. Tatsächlich werden alle Daten der letzten Stunde nur angezeigt, unabhängig von der Option, die aus dem Dropdown-Menü ausgewählt wurde (daher die "3600" in der HTTP-GET-Anfrage).

Meine Frage ist, wie könnte diese Funktion und Drop-Down-Menü geändert werden, so dass die vorherigen 30 Minuten nur angezeigt werden (Ändern von 3600 bis 1800 in der HTTP GET-Anfrage) und die vorherigen 15 Minuten angezeigt werden, wenn Sie die Option auswählen aus dem Dropdown-Menü.

Vielen Dank.

Answer 1

Sie etwas in diese Richtung wollen würde ...

Schritt 1: - Geben Sie Ihr Select-Elemente eine ID, auch jQuery umfassen.

Schritt 2: - Ändern Sie Ihre Auswahlwerte, um die korrekten Zeitwerte darzustellen, z. in einem Script-Tag ...

$(document).ready(function(){ 
    var selectedOption; 

    $('#selectid').change(function(){ 
     selectedOption = $(this).children(":selected").val(); 
    }); 

    .factory('DataService', function ($http, $q, CONFIG, $filter, $timeout, $interval) { 

     var DataService = {}; 
     var baseUrl = CONFIG.API_BASE_URL; 

     DataService.lastHour = function() { 
     return $http.get('/application/attack/from_time/'+selectedOption); 
     } 
    } 
}); 

So zum Boden der Datei Fügen Sie den folgenden Code, wenn die Wahl geändert wird es aktualisiert wird -: Der Wert der letzten Stunde sollte 3600

Schritt 3 sein die ausgewählte Optionsvariable, die später von Ihrer Werksfunktion verwendet wird.