Question

所以我有一个下拉列表，它提供了两个不同的相同信息视图，我想知道如何连接我的下拉列表选项，以便在隐藏另一个时更改向用户显示的<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> var amusic = document.createElement('audio'); amusic.setAttribute('src', 'sing.wav'); amusic.play(); </script> </head> <body> </body> </html>。这是我到目前为止所拥有的......

div

我的显示选项是：＆＃39;显示1＆＃39;和＆＃39;显示2＆＃39;

然后我有两个<select data-bind="options: displays, value: selectedDisplay, optionsText: 'displayOption'"></select>，分别用于显示选项。

div

默认情况下，我会在隐藏<div id="display1">.....</div> <div id="display2">.....</div>时显示display1，直到用户选择不同的显示，然后隐藏未使用的显示。

这就是我的视图模型：

display2

Answer 1

您只想对每个div应用visible绑定，并使其测试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>

根据下拉选择更改显示内容

1 个答案: