Use knockout to hide/display questions based on selected value in drop down

问题

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.

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.

回答1:

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"

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

Updated fiddle

回答2:

Condensed using mapping plugin, if anyone is interested. Also fixed errors in original fiddle.

http://jsfiddle.net/jgerstorff/bxBKq/25/

来源：https://stackoverflow.com/questions/12516123/use-knockout-to-hide-display-questions-based-on-selected-value-in-drop-down

标签

knockout.js