Question

我正在KnockoutJS上工作，我想隐藏并显示基于单选按钮选择的下拉列表，但是如果div不包含下拉列表，我会成功做到这一点，请找到JSFiddle http://jsfiddle.net/3z2n8LLa/

的链接

这里当你最初选择＆＃34;要求存在＆＃34;我正在显示一个div，但当你在＆＃34;区域，监视器，其他＆＃34;之间选择任何单选按钮时我想做同样的事情，但它只适用于第一次下拉..

请找到以下代码

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

viewmodel code

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

ko.applyBindings(new ViewModel());

帮助将不胜感激，

Answer 1

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

未捕获的ReferenceError：无法处理绑定＆＃34;选项：功能（）{return therapeuticArea}＆＃34;消息：没有定义therapeuticArea

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

根据单选按钮选择knockoutjs隐藏具有下拉列表的div

1 个答案: