Question

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

第一个功能是完美构建。

第二个功能使用下拉菜单“持续时间”使“VIP加1年”或“VIP加2年”选项显示/消失并构建第二个功能。

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

从下拉字段中重置knockout.js值，具体取决于另一个

1 个答案: