检索来自选定阵列对象布尔值(Retrieve boolean value from selected

目的

我试图创建一个显示不同的下拉列表（选择）列表基于“计划类型”如（“基本”，“标准”，“豪华”）的单个首选形式。

如果用户选择“基本设置”，然后用户可以从所谓的“选项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，你需要给你找出哪些planType对象从ID选择做出一些调整。一个可观察到的计算将帮助这里。

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

文章来源: Retrieve boolean value from selected array object