javascript - 使用敲除调用函数/使“div”容器在下拉框中的值更改时可见

Question

我有一个包含 4 个选项的下拉框。

然后，我有 4 个 div 容器，我使用style="display:none".

我希望在选择每个特定选项时，使用 KnockoutJs 使与该选项对应的 div 容器可见，而其余 div 容器保持不可见。

例如数组是：

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

这是在 DIVs 元素上使用可见绑定的解决方案：

<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> 

请参阅此小提琴以获取工作示例。

Answer 2

您可以订阅下拉列表的选定值，如下所示：

<select data-bind='options:Types, optionsCaption:"(Select a Type)", optionsText:"name", value:seltype'></select>  
<div id="div1" style="display:none"> id1 </div>     
<div id="div2" style="display:none"> id2 </div>  
<div id="div3" style="display:none"> id3 </div>  
<div id="div4" style="display:none"> id4 </div>  

this.seltype = ko.observable();   
this.Types=ko.observableArray([{id:1, name:'op1'},{id:2,name:'op2'},{id:3,name:'op3'},{id:4,name:'op4'}]);

this.seltype.subscribe(function(newValue){
    // jquery
    $.("#div1,#div2,#div3,#div4").hide();
    $.("#div" + newValue).show();
});