jquery - Change display content based on dropdown selection -

so have dropdown offers 2 different view of same information , wanted know how wire dropdown selection change div being displayed user while hiding other. here have far..

<select data-bind="options: displays, value: selecteddisplay, optionstext: 'displayoption'"></select> 

the display options have are: 'display 1' , 'display 2'

then have 2 div's each display option.

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

by default having display1 displayed while having display2 hidden until user selects different display 1 not in use hidden.

this have view model:

self.displays = ko.observablearray(); self.selectedview = ko.observable();  var sampledata = {          displays: [             {                 display1: 'display 1'             },             {                 display2: 'display 2'             }         ]     }; 

you want apply visible binding each div , make test selecteddisplay value.

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 div 1</div>  <div data-bind="visible:selecteddisplay() == 2">you see div 2</div>