Question

I have a dropdown box with 4 options.

Then, I have 4 div containers which I have made invisible using style="display:none".

I want that on selection for each particular option ,div container corresponding to that option be made visible and rest div containers remain invisible using KnockoutJs.

e.g
array is:

this.Types=ko.observableArray([{name:'op1'},{name:'op2'},{name:'op3'},{name:'op4'}]);

html:

<select data-bind='options:Types, optionsCaption:"(Select a Type)", optionsText:"name", value:seltype'></select>  

<div> id=1 style="display:none"> id1 </div>     
<div id=2 style="display:none"> id2 </div>  
<div id=3 style="display:none"> id3 </div>  
<div id=4 style="display:none"> id4 </div>  

Answer 1

Here is a solution using the visible binding on the DIVs elements:

<select data-bind='options:Types, optionsCaption:"(Select a Type)", optionsText:"name", optionsValue: "name", value:seltype'></select>  

<div data-bind="visible: seltype() === 'op1'"> id1 </div>     
<div data-bind="visible: seltype() === 'op2'"> id2 </div>  
<div data-bind="visible: seltype() === 'op3'"> id3 </div>  
<div data-bind="visible: seltype() === 'op4'"> id4 </div> 

See this fiddle for a working example.