Currently, I am working on implementing a dropdown feature that allows users to switch between two different views of the same information. I am looking for guidance on how to connect my dropdown selection to control which div is visible to the user, while hiding the other. Here is an overview of what I have done so far:
<select data-bind="options: displays, value: selectedDisplay, optionsText: 'displayOption'"></select>
The available display options are: 'Display 1' and 'Display 2'
I have set up two div elements, one for each display option.
<div id="display1">.....</div>
<div id="display2">.....</div>
Initially, 'display1' will be shown while 'display2' will be hidden. Upon selecting a different display option, the active display will remain visible and the inactive one will be hidden.
Below is a snippet of my view model code:
self.displays = ko.observableArray();
self.selectedView = ko.observable();
var sampleData = {
displays: [
{
display1: 'Display 1'
},
{
display2: 'Display 2'
}
]
};