基於單選按鈕選擇隱藏有下拉的div divoutjs

Question

我正在KnockoutJS上工作，我想隱藏並顯示基於單選按鈕選擇的下拉菜單，但是如果div不包含下拉菜單，我會成功做到這一點 請查找鏈接到JSFiddle http://jsfiddle.net/3z2n8LLa/

這裏，當你最初選擇「Requirement exists」時，我顯示一個div，但是當你在「Area，Monitor，Other」中選擇任何單選按鈕時，我想做同樣的事情，爲第一個下拉列表。

請在下面找到代碼

<div class="adminFieldsetContainer" id="RequirementsMain"> 
    <div> 
     <label class="fieldSetControl label" for="RequirementsExist">Requirements exist?:<span class="styleColorRed">*</span> 
     </label> 
     <div class="inline"> 
      <input type="radio" name="RequirementsExist" value="Yes" data-bind="checked: RequirementsExist" />Yes</div> 
     <div class="inline"> 
      <input type="radio" name="RequirementsExist" value="No" data-bind="checked: RequirementsExist" />No</div> 
    </div> 
    <div data-bind="visible: (RequirementsExist() == 'Yes')"> 
     <div> 
      <label class="fieldSetControl label" for="Experience">Experience Category:<span class="styleColorRed">*</span> 
      </label> 
      <div class="inline"> 
       <input type="radio" name="Experience" value="Area" data-bind="checked: Experience" />Area</div> 
      <div class="inline"> 
       <input type="radio" name="Experience" value="Monitor" data-bind="checked: Experience">Monitor</div> 
      <div class="inline"> 
       <input type="radio" name="Experience" value="Other" data-bind="checked: Experience">Other</div> 
     </div> 
     <div data-bind="visible: (Experience() == 'Area')"> 
      <p> 
       <select class="fieldsetLabelWIdthBigger" id="optionTherapeuticArea" data-bind="options: therapeuticArea"></select> 
      </p> 
     </div> 
     <div data-bind="visible: (Experience() == 'Monitor')"> 
      <p> 
       <select class="fieldsetLabelWIdthBigger" id="optionTherapeuticArea" data-bind="options: therapeuticArea"></select> 
      </p> 
     </div> 
     <div data-bind="visible: (Experience() == 'Other')"> 
      <p>Other</p> 
     </div> 
    </div> 
</div> 

視圖模型代碼

function ViewModel() { 
    var self = this; 
    self.RequirementsExist = ko.observable(); 
    self.Experience = ko.observable(); 
    self.JobRole = ko.observable(); 
} 

ko.applyBindings(new ViewModel()); 

幫助將不勝感激，

Answer 1

問題是你select元素都綁定到一個可觀察不上你的模型，它表現爲在一個錯誤存在控制檯：

Uncaught ReferenceError: Unable to process binding "options: function (){return therapeuticArea }" Message: therapeuticArea is not defined

如果您從select元素刪除綁定，it works as expected