从选定的数组对象中检索布尔值 [英] Retrieve boolean value from selected array object

问题描述

客观

我正在尝试创建一个表单，该表单将基于计划类型"的一个首选选择显示不同的下拉列表(选择)列表，例如(基本"，标准"，豪华").

I'm trying to create a form that will display different dropdown(select) lists based on a single first choice of "Plan Type" e.g.("Basic", "Standard", "Deluxe").

如果用户选择基本"，则用户可以从名为选项A"的新下拉列表中进行选择.如果他们选择标准"或豪华"，那么他们将获得选项B".

If a user selects "Basic", then the user can choose from a new dropdown list called "Option A". If they select "Standard" or "Deluxe" then they receive "Option B".

编辑为目标

我想我只需要在自己的视图中使用isOptionA或isOptionB即可使用.

I guess I just really need to have the isOptionA or isOptionB available for consumption in my view.

要求

用户只能看到他们选择的选项，我不想显示任何类型的禁用字段(原因:这对基本用户IMO是不好的体验).

The user can only see the options that they have selected, I do not want to show disabled fields of any kind (reason: its a bad experience for basic users, IMO).

此外，用户在任何时间都不得更改所有下拉菜单中的选项.

Also, the options in all dropdowns are not to be changed by the user at any point in time.

过去的研究

我爬了各种各样的网站，包括SO.他们谁也帮不了我.

I've crawled all sorts of sites, including SO. None of them can help me put it all together.

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小提琴，并在可能的情况下提供帮助.

Please view my js fiddle here and lend help if you can.

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

推荐答案

在绑定中不设置optionsValue会更容易.通过设置optionsValue，该值将投影到所选选项的属性.在这种情况下，如果选择了相应的选项，则selectedPlanType将是id.仅使用选项本身将使所有操作变得更加容易，因此您不必弄清楚再次选择了哪个选项.

It would be easier to not set the optionsValue in your binding. By setting the optionsValue, the value gets projected to the property of the selected option. In this case, selectedPlanType will be the id if the corresponding selected option. It would make everything easier to just use the option itself so you don't have to figure out which was selected again.

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

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

Given now that the selectedPlanType will now hold the actual planType object that was selected, it's just a matter of checking the selected plan type's option value.

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对象.计算出的可观察值将在这里有所帮助.

Otherwise, if you need that select to actually use the id, you'll need to make some adjustments to you figure out which planType object is selected from the id. A computed observable will help here.

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

这篇关于从选定的数组对象中检索布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！