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

Question

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 ti

Answer 1

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

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

Answer 2

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