JavaScript - 创建改变javascript变量的HTML下拉菜单

Question

我有一个具有HTML下拉菜单的应用程序。 HTML下拉菜单有三个选项。这三个选项与呈现数据库数据的时间维度有关。具体而言，可以显示最近一小时的数据，也可以显示最近30分钟的数据或最近15分钟的数据。

的HTML代码如下：

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

相应的JavaScript代码：

.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'); 
    } 
} 

显然，它是下拉菜单无法正常工作的情况。实际上，无论从下拉菜单中选择哪个选项（因此HTTP GET请求中的“3600”），都会显示上个小时的所有数据。

我的问题是，如何更改此功能和下拉菜单，以便仅显示前30分钟（在HTTP GET请求中更改3600至1800），并且在选择选项时将显示前15分钟从下拉菜单中选择。

非常感谢。

Answer 1

你想沿着这些路线的东西...

第1步： - 给你的选择元素的ID，也包括jQuery的。

步骤2： - 更改您的选择值以表示正确的时间值，例如，最后一小时的值应该是3600

第3步： - 下面的代码添加到脚本标记文件的底部...

$(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); 
     } 
    } 
}); 

因此，当选择发生变化，也将更新所选的选项变量稍后将由您的工厂功能使用。