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

【问题标题】：hiding div having dropdown based on radio button selection knockoutjs基于单选按钮选择knockoutjs隐藏具有下拉菜单的div
【发布时间】：2014-12-03 21:55:30
【问题描述】：

我正在开发 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());

我们将不胜感激，

【问题讨论】：

标签： jquery html knockout.js

【解决方案1】：

问题是您的 select 元素绑定到模型上不存在的可观察对象，这在控制台中显示为错误：

Uncaught ReferenceError: Unable to process binding "options: function (){returntreatmentArea }" 消息：未定义治疗区域

如果您从 select 元素中删除绑定，it works as expected

【讨论】：