Каскадный список нокаутов из того же источника

Мне нужно представить 5 выпадающих списков в моем пользовательском интерфейсе, заполненных Knockout ObservableArray. Все 5 читаются из одного и того же источника ko.observableArray([]).

У меня две проблемы:

  1. Как сделать так, чтобы каждая опция становилась активной только после того, как опция была выбрана до того, как она была выбрана? Должен быть активен только первый раскрывающийся список, после того как сделан выбор, активируйте второй, пока пользователь не выберет все 5.

  2. Каждое раскрывающееся меню считывается из одного и того же observableArray, но я не хочу, чтобы пользователи могли выбирать ту же опцию, что и в предыдущих раскрывающихся списках. Как сделать так, чтобы во втором раскрывающемся списке отображались все параметры, кроме того, что было выбрано в первом раскрывающемся списке? Как сделать так, чтобы в третьем раскрывающемся списке отображались все параметры, кроме того, что было выбрано в первом и втором раскрывающихся списках? Я могу делать каскадные выпадающие списки при загрузке из разных источников, но я действительно не хочу делать 5 отдельных вызовов $.getJSON, я бы предпочел один при начальной загрузке страницы.

Я нашел несколько предыдущих вопросов о каскадных списках выбора, но не для чтения из одного и того же источника...


drop-down-menu cascadingdropdown knockout.js
person Dragick    schedule 05.04.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать привязку enable для соединения предыдущего выбора value со вторым выбором.

Поэтому, когда вы выбираете что-то в первом раскрывающемся списке, firstValue будет содержать выбранное значение, поэтому enable: firstValue будет истинным, и он активирует второй раскрывающийся список.

<select data-bind="options: options, optionsText: 'value', 
                   optionsCaption: '', value: firstValue"></select>
<select data-bind="options: secondOptions, optionsText: 'value', 
                   optionsCaption: '',value: secondValue, 
                   enable: firstValue"></select>

Чтобы решить «каскадирование», вы можете использовать вычисляемые свойства для заполнения параметров с отфильтровыванием уже выбранных значений:

var VM = function () {

    this.options = ko.observableArray(/* load your original options here */);

    this.firstValue = ko.observable();
    this.secondValue = ko.observable();

    this.secondOptions = ko.computed(function () {
        return ko.utils.arrayFilter(this.options(), function (item) {
            return item != firstValue();
        });
    }, this);
}

И примените эти шаблоны к остальным 3 раскрывающимся спискам.

Демонстрация JSFiddle.

person nemesv    schedule 05.04.2014