根据另一个下拉字段重置 knockout.js 值

Question

我有一组下拉字段（使用 knockout.js）“动态”构建我在我的网站上使用的两个 javascript 函数，并通过链接触发。

第一个功能正在完美构建。

第二个函数使用下拉菜单“Duration”使“VIP Plus 1 年”或“VIP Plus 2 年”选项出现/消失并构建第二个函数。

问题是当我在“持续时间”中选择“1 年”，然后选择“Vip Plus 1”选项时，正确的 sku 会添加到我的第二个功能中，但是如果我改变主意并在持续时间中选择“2 年” ，该值保留在第二个函数中，并添加到我的输出中的新“VIP Plus 2 年”sku。

理想情况下，如果从“VIP Plus 1 年”或“VIP Plus 2 年”下拉列表中未选择任何内容，则根本不会出现第二个功能。

这可能很容易解决，但由于我是 js 的初学者，所以我被困在那里......

在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的更改并清除相应的VIP Plus设置：

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

JSFiddle