Javascript 循环视图模型在选择“更改”时显示图案图像

我正在加载以下型号的3个选择：

        var viewModel = function(){
                var self = this;
                self.makes = [
                        {id: 1, name: 'Northwoods Prestige'},
                        {id:2, name: 'Forest Bay'},
                        {id:3, name: 'Timberland'}
                ];

                self.types = [
                        {id: 1, make:1, name:'Special Reserve 138', patterns:['11.jpg','12.jpg']},
                        {id: 2, make:1, name:'Special Reserve II', patterns:['13.jpg','14.jpg']},
                        {id: 3, make:2, name:'TF 138', patterns:['15.jpg','16.jpg']},
                        {id: 4, make:2, name:'TF II', patterns:['17.jpg','18.jpg']},
                        {id: 5, make:3, name:'RP 25', patterns:['19.jpg','20.jpg']},
                        {id: 6, make:3, name:'LP 25', patterns:['21.jpg','22.jpg']}
                ];

                self.models = [
                        {id:1, make:1,type: 1, name: 'Single Door'},
                        {id: 2, make:1,type: 1, name: 'Double Door'},
                        {id: 3, make:1,type: 2, name: 'Focus'},
                        {id: 5, make:2,type: 3, name: 'Q5'},
                        {id: 6, make:2,type: 3, name: 'Q7'},
                        {id: 7, make:2,type: 4, name: 'A3'},
                        {id: 8, make:2,type: 4, name: 'A4'},
                        {id: 9, make:2,type: 3, name: 'A6'}
                ];

                self.selectedMake = ko.observable();
                self.selectedType = ko.observable();
                self.selectedModel = ko.observable();

                self.carTypes = ko.computed(function(){
                        return ko.utils.arrayFilter(self.types, function(item){
                                return item.make === self.selectedMake();
                        });
                });

                 self.carModels = ko.computed(function(){
                        return ko.utils.arrayFilter(self.models, function(item){
                                return item.make === self.selectedMake() && item.type === self.selectedType();
                        });
                });
        };
        var model = new viewModel();
        ko.applyBindings(model);

HTML:

---

每当我更改select id=“make”模型更改（foreach）时，只要我更改select id=“type”中的值而不是第一个值，我就会尝试实现这一点。有什么帮助吗？谢谢

我在类型选择器中添加了

选项caption

，因此默认情况下它不会选择一个。你可能不想那样，我说不出来

<select id="type" data-bind="optionsCaption:'Select...', options: carTypes, value: selectedType, optionsText : 'name', optionsValue : 'id'"></select>

我在foreach中使用了：

<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
    <div data-bind="text: x.patterns"></div>
</div>

现在只显示与所选类型关联的模式

要使图案具有图像而不是文本，请执行以下操作：

<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
    <div data-bind="foreach: x.patterns">
        <img data-bind="attr:{src:$data}" />
    </div>
</div>

---

谢谢，它很管用！。在我标记它之前的最后一个问题已经解决了。正如您在JSFIDLE中看到的，输出是'11.jpg，12.jpg'。如何从该输出中生成2个图像？

<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
    <div data-bind="text: x.patterns"></div>
</div>

<div data-bind="foreach: { data: matchingTypes, as: 'x' }">
    <div data-bind="foreach: x.patterns">
        <img data-bind="attr:{src:$data}" />
    </div>
</div>