KnockOutJS显示在下拉选择更改时隐藏元素

时间:2016-06-18 22:34:02

标签: javascript html knockout.js

您好我正在尝试在Knockout js中获取下拉列表的选定值,以便我可以根据选择隐藏/显示其他元素。以下是我的尝试。 发生了什么,我能够在按钮点击时获得正确的价值,但不能在下拉选择更改上获得正确的价值。

以下是我的代码。该按钮给出了正确的值,但是下拉选择更改事件给出了之前的值&不是选定的。

JS

   function ViewModel() {
     var self = this;
     self.optionValues= ko.observableArray(["Test1", "Test2", "Test3"]);
     self.selectedValue = ko.observable();

     self.save = function() {
        alert(self.selectedValue());            
    }
   }

  ko.applyBindings(new ViewModel());

HTML

<select data-bind="event:{ change: save},options: optionValues, value: selectedValue"></select>

 <button data-bind="click: save">Save</button>

1 个答案:

答案 0 :(得分:1)

而不是change事件绑定绑定,您应该在selectedValue可观察对象上subscribe directly,并从那里调用您的逻辑:

function ViewModel() {
  var self = this;
  self.optionValues = ko.observableArray(["Test1", "Test2", "Test3"]);
  self.selectedValue = ko.observable();
  self.selectedValue.subscribe(function(newValue) {
    self.save();
  });
  self.save = function() {
    alert(self.selectedValue());
  }
}
ko.applyBindings(new ViewModel());

HTML:

<select data-bind="options: optionValues, value: selectedValue"></select>

<button data-bind="click: save">Save</button>

演示JSFiddle