javascript - Retrieve boolean value from selected array object -

objective

i'm trying create form display different dropdown(select) lists based on single first choice of "plan type" e.g.("basic", "standard", "deluxe").

if user selects "basic", user can choose new dropdown list called "option a". if select "standard" or "deluxe" receive "option b".

edit objective

i guess need have isoptiona or isoptionb available consumption in view.

requirement

the user can see options have selected, not want show disabled fields of kind (reason: bad experience basic users, imo).

also, options in dropdowns not changed user @ point in time.

past research

i've crawled sorts of sites, including so. none of them can me put together.

html

<div>     <select id="plantype" data-bind="options: plantypes, value: selectedplantype, optionstext : 'name', optionsvalue : 'id', optionscaption : 'select plan'"></select> </div> <div data-bind="if: isoptiona">     option available! </div> 

knockout 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 selected plan type's boolean optiona         //'isoptiona'     });     self.isoptionb = ko.computed(function(){         //pass selected plan type's boolean optionb         //'isoptionb'     });  };  ko.applybindings(viewmodel); 

please view js fiddle here , lend if can.

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

it easier not set optionsvalue in binding. setting optionsvalue, value gets projected property of selected option. in case, selectedplantype id if corresponding selected option. make easier use option don't have figure out selected again.

<select id="plantype" data-bind="options: plantypes,                                  value: selectedplantype,                                  optionstext: 'name',                                  optionscaption: 'select plan'"> </select> 

given selectedplantype hold actual plantype object selected, it's matter of checking selected plan type's option value.

self.selectedplantype = ko.observable(); // 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/

---

otherwise, if need select use id, you'll need make adjustments figure out plantype object selected id. computed observable here.

<select id="plantype" data-bind="options: plantypes,                                  value: selectedplantypeid,                                  optionstext: 'name',                                  optionsvalue: 'id',                                  optionscaption: 'select 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/