使用剔除功能可根据下拉菜单中的选定值隐藏/显示问题 [英] Use knockout to hide/display questions based on selected value in drop down

问题描述

好的，我是一个淘汰赛的菜鸟.在解决一个非常简单的问题时遇到了麻烦.我有一个与淘汰赛observableArray相关的下拉列表.也有与另一个observableArray相关的问题列表.这些问题应根据下拉菜单的选定值隐藏/显示.

OK, I am a noob with knockout. Having trouble figuring out a really simple issue. I have a drop down list tied to a knockout observableArray. Also have a list of questions tied to another observableArray. The questions should hide/show based on the selected value of the drop down.

在您查看该字段之前，请先阅读以下内容.
我已经硬编码了"EnvId()=== 1"，只是为了使其工作.我尝试了各种函数和ko.computed(在问题"和"viewModel"中)用"CurrentEnviron()"之类的东西替换"1"，但是由于我没有将它们从提琴中删除想要影响任何人的答案.好的，这是小提琴.

BEFORE YOU LOOK AT THE FIDDLE, PLEASE READ THE FOLLOWING.
I have hard coded the "EnvId() === 1" just to make it work. I have tried all kinds of functions and ko.computed (in both the "question" and the "viewModel") to replace the "1" with something like "CurrentEnviron()" but have removed them from the fiddle because I don't want to influence anyone's answer. OK, here is the fiddle.

我发现很多真的很接近的其他问题，但又相差甚远，以至于我无法使用答案.抱歉，如果实际上存在重复项，而我只是使用了错误的搜索词而找不到它.

I found a lot of other questions that were REALLY close but just different enough that I could not use the answers. Sorry if there actually is a duplicate and I just used the wrong search terms and could not find it.

推荐答案

要能够使用该选项绑定，您需要确保同时对它应用value绑定以标记选择了哪个项目.然后，您可以将questions数组设置为可计算的可观察值，并根据选择的值返回已过滤问题的数组.

To be able to make use of that options binding, you need to make sure you also apply a value binding to it to mark which item is selected. Then you can make the questions array a computed observable to which would return an array of filtered questions based on the selected value.

Environment Type: <select id="qEnv" data-bind="value: selectedEnvironment, options: envTypes, optionsCaption: 'Select...', optionsValue: 'envId', optionsText: 'envName'"></select>

还要确保使用创建的映射数组初始化可观察数组.大学教师 不能像您那样替换它们. (尽管在这种情况下，因为数组没有被修改，所以没关系)

Also make sure you initialize the observable arrays with the mapped array you created. Don 't replace them as you did. (Though in this case it didn't matter since the array wasn't being modified)

function viewModel() {
    var self = this;

    // initialize the array with the mapped array
    self.envTypes = ko.observableArray(ko.utils.arrayMap(environments, function(item) {
        return {
            envName: item.Text,
            envId: item.EnvId
        };
    }));

    // this tracks our selected environment value
    self.selectedEnvironment = ko.observable();

    // return a filtered array where the items match the selected environment
    self.questions = ko.computed(function () {
        return ko.utils.arrayFilter(quests, function (item) {
            return item.EnvId == self.selectedEnvironment();
        });
    });
}

您可能希望根据问题数组是否为空来显示问题或消息，因此您必须调整测试.

You probably would want to display the questions or the message based on whether the questions array was empty or not, so you would have to adjust the test.

data-bind="if: questions().length"

环境具有重复的EnvId值，因此我更新了这些值，并添加了optionsCaption绑定以增加效果.

The environments had duplicate EnvId values so I updated those as well as add a optionsCaption binding for added effect.

更新了小提琴

这篇关于使用剔除功能可根据下拉菜单中的选定值隐藏/显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！