根据 Knockout.js 中 select 列表的 selected 选项显示或隐藏 HTML 元素？

Question

仅当从我的 select 列表中选择第二个选项时，我才希望 div 为 visible/hidden。这是我的代码，我正在尝试实现该功能。

HTML:

<select data-bind="options: Datevalue">
</select> 

<div data-bind="visible: showSecond">
  <h3>
    If its the second option show me!!
  </h3>
</div>

JavaScript:

$(document).ready(function() {
  function FilterModel() {
    var self = this;

    this.Datevalue = ko.observableArray(['France', 'Germany', 'Spain']);

    // boolean for showing the second select
    this.showSecond = ko.computed(function() {
      return this.Datevalue == 2;
    }, this);
  }

  $(function() {
    ko.applyBindings(new FilterModel());
  });
});

Answer 1

在您的 FilterModel() 函数中定义 self.selectedChoice = ko.observable() 并在您的 select 列表标记中指定值：selectedChoice 以获取 select 您的 select 列表的值。

<select data-bind="options: Datevalue , value: selectedChoice">
</select>

然后在您的 FilterModel 函数中将 selected 值与您的数组索引 [1] 值进行比较，该值实际上是 select 列表的第二个选项。

function FilterModel() {
    var self = this;
    self.selectedChoice = ko.observable();
    self.Datevalue = ko.observableArray(['France', 'Germany', 'Spain']);

    // boolean for showing the second select
    this.showSecond = ko.computed(function () {
        return this.selectedChoice() == this.Datevalue()[1];
   }, this);
}

根据 Knockout.js 中 select 列表的 selected 选项显示或隐藏 HTML 元素？

Show or hide an HTML element on base of selected option of a select list in Knockout.js?

html

javascript

knockout.js