JavaScript - Create HTML drop down menu that alters a javascript variable

Question

I have an app that has an HTML drop down menu. The HTML drop down menu has three options. The three options relate to the time dimension in which data from a database is presented. Specifically, either data from the last hour can be presented, or from the last 30 minutes, or from the last 15 minutes.

The HTML code is as follows:

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

The corresponding JavaScript code is:

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

Obviously, it is the case that the drop down menu does not work. Indeed, all data from the last hour is shown only, regardless of the option selected from the drop down menu (hence the "3600" in the HTTP GET request).

My question is how could this function and drop down menu be altered such that the previous 30 minutes will be shown only (changing 3600 to 1800 in the HTTP GET request) and the previous 15 minutes will be shown when selecting the option from the dropdown menu.

Many thanks.

AndrewBramwell AndrewBramwell · Accepted Answer · 2016-03-19T23:10:35

You would want something along these lines...

Step 1:- Give your Select element an ID, also include jQuery.

Step 2:- Change your select values to represent the correct time values, e.g. the value of last hour should be 3600

Step 3:- Add the following code to the bottom of your file in a 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 when the select is changed it will update the selected option variable which is later used by your factory function.

JavaScript - Create HTML drop down menu that alters a javascript variable

1 Answers