2013-05-08 13 views
9

私はドロップダウンを持っていますが、ユーザーが別の値を選択したときにコードを実行します。私の質問:ドロップダウンの選択された値が変更されたかどうかを確認する方法はありますか?私のjavascriptのファイルにMeteor - 選択変更時にvarを更新する

<template name="jaren">  
    <form id="yearFilter"> 
     <select class="selectpicker span2" id="yearpicker" > 
      {{#each jaren}} 
       {{#if selectedYear}} 
       <option selected value="{{_id}}">{{jaar}} {{description}}</option> 
       {{else}} 
       <option value="{{_id}}">{{jaar}} {{description}}</option> 
       {{/if}} 
      {{/each}} 
     </select> 
    </form> 
</template> 

Template.jaren.jaren = function() { 
    return Years.find(); 
} 
Template.jaren.selectedYear = function() { 
    if (Session.get('year_id') == this._id) { 
    return true; 
    } else { 
    return false; 
    } 
} 
Template.jaren.events({ 
    'change form#yearFilter #yearpicker': function(event, template) { 
    Session.set('year_id', template.find('#yearpicker').value); 
    console.log("value changed"); 
    } 
}); 

答えて

20

あなたは、イベントハンドラ内でselect要素の値を取得し、古い値あなたにそれを比較することができ、私のHTMLファイルに

"change #yearpicker": function(evt) { 
    var newValue = $(evt.target).val(); 
    var oldValue = Session.get("year_id"); 
    if (newValue != oldValue) { 
    // value changed, let's do something 
    } 
    Session.set("year_id", newValue); 
} 
+0

最初の問題は、ブートストラップのselectpicker(https://github.com/silviomoreto/bootstrap-select)がイベントハンドラを壊してしまったため、流星がデータが変更されたことを決して知らないことです。 –

+2

jQueryを使用しないで 'console.log(e.target.value);'を使うことができます。 –

+1

'console.log(e.target.value);' selectは値を持たないので、動作しません。それは子供としてオプションを選択し、彼らは価値があります。 'currentTarget.options [currentTarget.selectedIndex] .value'を使う必要があります。 –

2

純粋なJavaScriptを使用したソリューションは次のようになります:

'change #yearpicker': function (event) { 
    var currentTarget = event.currentTarget; 
    var newValue = currentTarget.options[currentTarget.selectedIndex].value; 
    if(!Session.equals('year_id', newValue)){ 
    Session.set('year_id', newValue); 
    } 
} 
関連する問題