2016-03-19 13 views
1

私はHTMLドロップダウンメニューを持つアプリケーションを持っています。 HTMLドロップダウンメニューには3つのオプションがあります。 3つのオプションは、データベースのデータが表示される時間ディメンションに関連しています。具体的には、過去1時間のデータ、または過去30分間または過去15分間のいずれかのデータを提示することができる。JavaScript - javascript変数を変更する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'); 
    } 
} 

明らかにそれは、ドロップダウンメニューが動作しない場合で、次のように

HTMLコードです。実際には、ドロップダウンメニューから選択されたオプション(つまり、HTTP GETリクエストの「3600」)に関係なく、過去1時間のすべてのデータが表示されます。

私の質問は、この機能とドロップダウンメニューを変更して、前回の30分だけを表示し(HTTP GETリクエストで3600から1800に変更する)、オプ​​ションを選択すると前の15分が表示されるようにする方法ですドロップダウンメニューから選択します。

多くのありがとうございます。あなたはこれらの線に沿って何かをしたいと思う

答えて

1

...

ステップ1: - はあなたの選択要素IDを付け、また、jQueryのが含まれます。

ステップ2: - 正しい値を表す値を変更します。選択が変更されたときに、それは

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

を更新します... スクリプトタグ内のファイルの末尾に次のコードを追加します - :最後の時間の値は、3600

ステップ3でなければなりません選択されたオプション変数は、後であなたのファクトリ関数によって使用されます。