使用淘汰赛根据下拉列表中的选定值隐藏/显示问题 [英] 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(在问题"和视图模型"中)将1"替换为CurrentEnviron()"之类的东西，但已将它们从小提琴中删除，因为我没有想影响任何人的答案.好的，这是 fiddle.

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 数组成为一个计算的 observable，它会根据选定的值返回一个过滤问题数组.

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