Javascript 从选定数组对象检索布尔值

客观的

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

如果用户选择Basic，则用户可以从名为选项a的新下拉列表中进行选择。如果用户选择Standard或Deluxe，则会收到选项B

编辑到目标

我想在我看来，我真的需要让isOptionA或isOptionB可以使用

要求

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

此外，用户在任何时候都不会更改所有下拉列表中的选项

过去的研究

我爬过各种各样的网站，包括SO。他们中没有一个人能帮我把这一切拼凑起来

HTML

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

---

在绑定中不设置optionsValue会更容易。通过设置optionsValue，该值将投影到选定选项的属性。在这种情况下，如果选择了相应的选项，则SelectedPlantType将是id。只要使用选项本身，一切都会变得更容易，这样您就不必再去弄清楚哪个选项被选中了

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

否则，如果您需要选择以实际使用id，则需要进行一些调整，以确定从id中选择了哪个PlantType对象。计算的可观察对象将在这里有所帮助

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

上面的代码应该可以帮助您。我们所做的只是查看所选选项是否有值，是否等于您想要的值。ie标准、基本等

---

我知道我没有表示后续选项，在这一点上，它们的数据是无关的。我真的只想将isOptionA和isOptionB返回为true或false，并在视图中看到它的更新。请原谅我使用SO或JSFIDLE时的天真，这是我在该网站上的第一个问题，也是我的第一个问题。类似这样的内容：？这可能有点粗糙，但它应该能让人明白：哑巴问题，到底是什么！！运算符？这只是一种将表达式转换为布尔值的方法。e、 g！！未定义->！正确->错误

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

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;
});

<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;
    });
});

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);