Meteor - 在选择更改时更新变量

Question

我有一个下拉菜单，但当用户选择另一个值时，我希望执行一些代码。我的问题是：如何检查所选下拉菜单的值是否已更改？

在我的html文件中：

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

在我的JavaScript文件中：

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");
  }
});

- Kobus Post

Answer 1

您可以在事件处理程序内获取选择元素的值，然后将其与您已经存储的旧值进行比较：

"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);
}

- Rahul

---

最初的问题是 Bootstrap selectpicker（https://github.com/silviomoreto/bootstrap-select）破坏了事件处理程序，导致meteor永远不知道数据已经被更改:(。 - Kobus Post

你可以直接使用 console.log(e.target.value); 而不需要使用 jQuery。 - Daniele Vrut

console.log(e.target.value); 不起作用，因为选择器没有值。它的选项是作为子元素进行选择的，它们有值。你必须使用 currentTarget.options[currentTarget.selectedIndex].value。 - Daniel Budick

Answer 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);
  }
}

- Daniel Budick