基于单选按钮选择的隐藏div具有下拉菜单

Question

我正在KnockoutJS上工作，我想根据单选按钮的选择隐藏和显示具有下拉菜单的div，但是如果div不包含下拉菜单，我可以成功完成此操作，请找到指向JSFiddle的链接http://jsfiddle.net/3z2n8LLa/

在这里，当您最初选择“需求存在”时，我正在显示一个div，但是当您在“区域，监视器，其他”中选择任何单选按钮时，我想做同样的事情，但仅适用于第一个下拉列表。

请在下面找到代码

    <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元素绑定到模型上不存在的observable，这在控制台中显示为错误：

Uncaught ReferenceError：无法处理绑定“选项：function（）{return therapyArea}”消息：未定义rapedArea

如果从select元素中删除绑定， 它将按预期工作