Question

目标

我正在尝试创建一个表单，该表单将根据单个首选“计划类型”显示不同的下拉列表（选择），例如（“基本”，“标准”，“豪华”）。

如果用户选择“基本”，则用户可以从名为“选项A”的新下拉列表中进行选择。如果他们选择“标准”或“豪华”，则他们会收到“选项B”。

编辑为目标

我想我真的需要在我的视图中使用isOptionA或isOptionB。

要求

用户只能看到他们选择的选项，我不想显示任何类型的禁用字段（原因：对于基本用户来说，这是一种糟糕的体验，IMO）。

此外，用户不得在任何时间点更改所有下拉列表中的选项。

过去的研究

我抓了各种各样的网站，包括SO。他们都不能帮助我把它们放在一起。

HTML

<div>
    <select id="planType" data-bind="options: planTypes, value: selectedPlanType, optionsText : 'name', optionsValue : 'id', optionsCaption : 'Select your Plan'"></select>
</div>
<div data-bind="if: isOptionA">
    Option A Available!
</div>

淘汰JS

var viewModel = function(){
    var self = this;
    self.planTypes = [
        { id: 0, name: 'Basic', optionA: false, optionB: true },
        { id: 1, name: 'Standard', optionA: true, optionB: false },
        { id: 2, name: 'Deluxe', optionA: true, optionB: false }
    ];

    self.selectedPlanType = ko.observable();
    self.isOptionA = ko.computed(function(){
        //pass the currently selected plan type's boolean for optionA to
        //'isOptionA'
    });
    self.isOptionB = ko.computed(function(){
        //pass the currently selected plan type's boolean for optionB to
        //'isOptionB'
    });

};

ko.applyBindings(viewModel);

请在这里查看我的js小提琴，如果可以，请提供帮助。

http://jsfiddle.net/winsconsinfan/9jqgazfx/9/

Answer 1

在绑定中不设置optionsValue会更容易。通过设置optionsValue，该值将投影到所选选项的属性。在这种情况下，如果相应的选定选项，selectedPlanType将是id。只需使用选项本身就可以让所有内容变得更容易，因此您无需弄清楚哪个选项会再次被选中。

<select id="planType" data-bind="options: planTypes,
                                 value: selectedPlanType,
                                 optionsText: 'name',
                                 optionsCaption: 'Select your Plan'">
</select>

现在，selectedPlanType现在将保留所选的实际planType对象，只需检查所选计划类型的选项值即可。

self.selectedPlanType = ko.observable(); // now a planType object, not id
self.isOptionA = ko.computed(function(){
    var selectedPlanType = self.selectedPlanType();
    return selectedPlanType && !!selectedPlanType.optionA;
});
self.isOptionB = ko.computed(function(){
    var selectedPlanType = self.selectedPlanType();
    return selectedPlanType && !!selectedPlanType.optionB;
});

http://jsfiddle.net/9jqgazfx/10/

否则，如果你需要选择实际使用id，你需要做一些调整，找出从id中选择哪个planType对象。计算出的observable在这里会有所帮助。

<select id="planType" data-bind="options: planTypes,
                                 value: selectedPlanTypeId,
                                 optionsText: 'name',
                                 optionsValue: 'id',
                                 optionsCaption: 'Select your Plan'">
</select>

self.selectedPlanTypeId = ko.observable();
self.selectedPlanType = ko.computed(function () {
    var selectedPlanTypeId = self.selectedPlanTypeId();
    return ko.utils.arrayFirst(self.planTypes, function (planType) {
        return planType.id == selectedPlanTypeId;
    });
});

http://jsfiddle.net/9jqgazfx/14/

Answer 2

var viewModel = function(){
var self = this;
self.planTypes = [
    { id: 0, name: 'Basic'},
    { id: 1, name: 'Standard'},
    { id: 2, name: 'Deluxe'}
];

self.selectedPlanType = ko.observable();
self.isOptionA = ko.computed(function(){
    return (self.selectedPlanType() != null)? self.selectedPlanType() != 0 ? true :false :false;
});

self.isOptionB = ko.computed(function(){
    return (self.selectedPlanType() != null)?self.selectedPlanType() == 0 ? true :false :false;
});
};
ko.applyBindings(viewModel);

上面的代码可以帮到你。我们所做的就是查看所选选项是否具有值并且等于您想要的值。即标准，基本等。

http://jsfiddle.net/9jqgazfx/13/

从所选数组对象中检索布尔值

2 个答案: