Каскадные выпадающие списки с knockout.js и select2

selectedMake является наблюдаемым, его значение будет каскадным экземпляром Option. Чтобы использовать это в своем диапазоне: текстовое связывание, вам понадобятся:

<span data-bind="text: selectedMake().text"></span>

Он работает, когда вы используете подписку, потому что получаете значение наблюдаемого.

Select2 пытается синхронизировать элемент select с его внутренним состоянием. К сожалению, он зависит от каждой опции, имеющей значение Id. Поскольку вы не используете привязки optionsValue, это не сработает. Я также использую select2, но я изменил их код, чтобы использовать optionIndex вместо Id и довольно сложную привязку select2 для управления различиями, например Ajax и multiselect.

Тем не менее, вы получаете образец, который работает с select2...

1. Создайте наблюдаемое для хранения идентификатора.
2. Измените привязку значения для использования идентификатора Id
3. Добавьте привязку optionsValue, чтобы вернуть уникальный идентификатор из вашей исходной опции. Это будет использоваться для синхронизации опции select2 и опции выбора.
4. Добавьте подписку на идентификатор, подлежащий фильтрации, чтобы отфильтровать параметры и вернуть объект из массива параметров
5. Добавьте подписку на наблюдаемое значение, чтобы синхронизировать идентификатор (будьте осторожны с бесконечным циклом между двумя подписками)

Я обновил JSFiddle, но различия ниже. В этом случае я создаю функцию-оболочку для создания пары наблюдаемых /id с подписями между 2. Связывание выбора имеет другое значение привязки значения и добавленную привязку optionValue Связывание диапазона имеет другое значение привязки текста.

HTML

<div>
    <select id="make" data-bind="options: carMakers, value: selectedMake.id, optionsValue: 'text', optionsText : 'text', optionsCaption : 'Select your make', select2: {}"></select><br/>
    Selected Make: <span data-bind="text: selectedMake().text"></span><br/>
    <select id="type" data-bind="options: carTypes, value: selectedType.id, optionsValue: 'text', optionsText : 'text', optionsCaption : 'Select your type', enable : carTypes, select2: {}"></select><br/>
    Selected Model: <span data-bind="text: selectedType().text"></span><br/>
    <select id="model" data-bind="options: carModels, value: selectedModel.id, optionsValue: 'text', optionsText : 'text', optionsCaption : 'Select your Model', enable: carModels, select2: {}"></select><br/>
    Selected Model: <span data-bind="text: selectedModel().text"></span><br/>
</div>

Javascript

var makeObservableForSelect2 = function( sourceOptions, idSelector ) {
    var target = ko.observable({});
    target.id = ko.observable();

    target.id.subscribe( function(id) {
        var realSource = ko.unwrap(sourceOptions)
        if ( !realSource ) {
            return;
        };
        // Don't set target if id already matches to stop infinite loop.
        if ( target() && target()[idSelector] === id ) {
            return;
        }

        target( realSource.filter( function(item) { return item[idSelector] === id; } )[0] || {} );
    } );

    target.subscribe( function(value) {
        // Don't set id if id already matches to stop infinite loop.
        if ( target.id() && value[idSelector] === target.id() ) {
            return;
        }

        target.id(value[idSelector]);
    });

    return target;
};

var viewModel = {
    carMakers: buildData()
};

viewModel.selectedMake = makeObservableForSelect2( viewModel.carMakers, 'text');

viewModel.carTypes = ko.computed(function(){
    return viewModel.selectedMake() ? viewModel.selectedMake().childOptions : null;
});

viewModel.selectedType = makeObservableForSelect2( viewModel.carTypes, 'text');

viewModel.carModels = ko.computed(function(){
    return viewModel.selectedType() ? viewModel.selectedType().childOptions : null;
});

viewModel.selectedModel = makeObservableForSelect2( viewModel.carModels, 'text');