Сброс значения knockout.js из выпадающего поля в зависимости от другого

Question

У меня есть набор раскрывающихся полей (с использованием knockout.js), которые «динамически» строят две функции javascript, которые я использую на своем веб-сайте, и что я запускаю ссылка.

Первая функция строится идеально.

Вторая функция использует раскрывающийся список «Продолжительность», чтобы сделать «VIP Plus 1 год» или «VIP Plus 2 года», чтобы появиться/исчезнуть и построить вторую функцию.

Проблема заключается в том, что я выбираю «1 год» в «Продолжительность», а затем «Vip Plus 1», правильная ски добавляется ко второй функции, НО если я передумаю и выберите «2 года» в Продолжительность, значение остается во второй функции и добавляется в новый «VIP Plus 2 years» sku на моем выходе.

В идеале, если ничто не выбрано из выпадающих меню «VIP Plus 1 год» или «VIP Plus 2 года», вторая функция просто не появится вообще.

Это, вероятно, очень легко решить, но так как я новичок в JS, я stucked там ...

Смотрите мой просмотр в http://jsfiddle.net/X6fJ5/3/

<p>Membership : <select name="no1" data-bind="value: membership" /> 
       <option value="NEW">New membership</option> 
       <option value="RENEW">Renew membership</option> 
       <option value="GIFT">Gift membership</option> 
       </select> 
</p> 
<p>Category : <select name="no2" data-bind="value: category" /> 
       <option value="1400">VIP Individual</option> 
       <option value="709">VIP Family</option> 
       <option value="703">VIP ang Guest</option> 
       <option value="1389">VIP Student</option> 
       </select> 
</p> 
<p>Duration : <select name="no3" data-bind="value: duration" id="opts" onchange="showForm();" /> 
       <option value="1" selected="selected">1 an</option> 
       <option value="2">2 ans</option> 
       </select> 
</p> 
<div id="f1" style="display:none"> 
<p>VIP Plus 1 year : <select name="no4" data-bind="value: vipplus1" id="opts" /> 
       <option value="" selected="selected">No thanks</option> 
       <option value="DON-VIPPLUS1-125">VIP Plus 1</option> 
       <option value="DON-VIPPLUS1-250">VIP Plus 2</option> 
       <option value="DON-VIPPLUS1-500">VIP Plus 3</option> 
       </select> 
</div> 
<div id="f2" style="display:none"> 
VIP Plus 2 years : <select name="no5" data-bind="value: vipplus2" id="opts" /> 
       <option value="" selected="selected">No thanks</option> 
       <option value="DON-VIPPLUS2-250">VIP Plus 1</option> 
       <option value="DON-VIPPLUS2-500">VIP Plus 2</option> 
       <option value="DON-VIPPLUS2-1000">VIP Plus 3</option> 
       </select> 
</p></div> 
<br /> 
<a href="javascript:void(0);" data-bind="attr: { onclick: mvipsku }">Add to cart</a> 
<br /> 
<h3><span data-bind="html: mvipsku"> </span></h3> 
<script type="text/javascript"> 
var ViewModel = function(membership, category, duration, vipplus1, vipplus2) { 
    this.membership = ko.observable(membership); 
    this.category = ko.observable(category); 
    this.duration = ko.observable(duration); 
    this.vipplus1 = ko.observable(vipplus1); 
    this.vipplus2 = ko.observable(vipplus2);  

    this.mvipsku = ko.computed(function() { 
     return "addMembershipToCart('" + "MVIP-" + this.membership() + "-" + this.duration() + "-" + this.category() + "');" + "<br />" + "addProductToCart('" + this.vipplus1() + this.vipplus2() + "');"; 
    }, this); 

}; 

ko.applyBindings(new ViewModel()); // This makes Knockout get to work 

function showForm() { 
    var selopt = document.getElementById("opts").value; 
    if (selopt == 1) { 
     document.getElementById("f1").style.display = "block"; 
     document.getElementById("f2").style.display = "none"; 
    } 
    if (selopt == 2) { 
     document.getElementById("f2").style.display = "block"; 
     document.getElementById("f1").style.display = "none"; 
    } 
} 
</script> 

Answer 1

Вы должны подписаться на изменения из duration и очистить apprpropriate VIP Plus настройки:

self.duration.subscribe(function(newValue) { 
    if(newValue == '1') { 
     self.vipplus2(null); 
    } else if(newValue == '2') { 
     self.vipplus1(null); 
    } 
}); 

JSFiddle