1

4 つのオプションがあるドロップダウン ボックスがあります。

次に、を使用して非表示にした 4 つの div コンテナーがありstyle="display:none"ます。

特定のオプションごとに選択すると、そのオプションに対応する div コンテナーが表示され、残りの div コンテナーは KnockoutJs を使用して非表示のままになります。

たとえば、配列は次のとおりです。 

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

2 に答える 2

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>

実際の例については、このフィドルを参照してください。

于 2012-10-07T18:45:14.690 に答える
0

ドロップダウンの選択した値を次のようにサブスクライブできます。

<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();
});
于 2012-10-07T18:39:09.860 に答える