Change display content based on dropdown selection

So I have a dropdown that offers two different view of the same information and I wanted to know how I could wire up my dropdown selection to change which div is being displayed to the user while hiding the other. Here is what I have so far..

所以我有一个下拉列表,它提供了相同信息的两个不同视图,我想知道如何连接我的下拉列表选项,以便在隐藏另一个时更改向用户显示的div。这是我到目前为止...

<select data-bind="options: displays, value: selectedDisplay, optionsText: 'displayOption'"></select>

The display options I have are: 'Display 1' and 'Display 2'

我有的显示选项是:'显示1'和'显示2'

Then I have two div's each for a display option.

然后我有两个div用于显示选项。

<div id="display1">.....</div>
<div id="display2">.....</div>

By default I will be having display1 be displayed while having display2 hidden until the user selects a different display then the one not in use will be hidden.

默认情况下,我将显示display1,同时隐藏display2,直到用户选择不同的显示,然后隐藏未使用的显示。

This is what I have for my view model:

这就是我对我的视图模型的看法:

self.displays = ko.observableArray();
self.selectedView = ko.observable();

var sampleData = {

        displays: [
            {
                display1: 'Display 1'
            },
            {
                display2: 'Display 2'
            }
        ]
    };

1 个解决方案

#1

You just want to apply a visible binding to each div and make it test the selectedDisplay value.

您只想对每个div应用可见绑定,并使其测试selectedDisplay值。

var vm = {
  selectedDisplay: ko.observable(),
  displays: [
    1, 2
  ]
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: displays, value: selectedDisplay"></select>
<div data-bind="visible:selectedDisplay() == 1">This is Div 1</div>
<div data-bind="visible:selectedDisplay() == 2">You see Div 2</div>