Question

好的，所以我有以下json：

{"VehicleMakes":
[{"VehicleModels":[],"ID":3,"Description":"BMW"},
{"VehicleModels":[],"ID":1,"Description":"Ford"},
{"VehicleModels":[{"ID":1,"Description":"Astra","MakeID":2},{"ID":2,"Description":"Corsa","MakeID":2}],"ID":2,"Description":"Vauxhall"}],
"VehicleModels":[],
"SelectedMake":"Vauxhall","SelectedModel":null,"Postcode":null}

所以基本上我有一些车辆制造和一个制造可以有一些模型。

然后我有以下模型：

 function SearchModel() {
        this.SearchCriteria = "";
        this.SelectedMake = ko.observable();
        this.SelectedModel = ko.observable();
    }

然后这个html：

<select id="vehiclesMake" data-bind="options: SearchCriteria.VehicleMakes, optionsText: 'Description',optionsValue: 'Description', value: SelectedMake, optionsCaption: 'Choose...'"></select>      

 <div data-bind="if: SelectedMake">
            <select data-bind='options: SelectedMake().VehicleModels, optionsText: "Description", optionsCaption: "Select...", optionsValue: "Description", value: SelectedModel'></select>
                 </div>

所以我基本上试图说，当在第一个下拉列表中选择车辆制造时，在第二个下拉列表中显示其模型。

第一个下拉列表填充正常，当我做出选择时，会出现第二个下拉列表但未填充。

注意我将所有json分配给属性SearchCriteria。

我做错了什么？

Answer 1

在您使用设置optionsValue: 'Description'的第一个选择中，您告诉knockout使用Description文本作为选择中的值。因此，您的SelectedMake将包含Description文本，而不是VehicleMake对象。

所以只需删除optionsValue，它就可以正常工作了：

<select id="vehiclesMake" data-bind="options: SearchCriteria.VehicleMakes, 
                                     optionsText:  'Description', 
                                     value: SelectedMake, 
                                     optionsCaption: 'Choose...'"></select>

演示JSFiddle。

基于具有knockoutjs的嵌套下拉列表选择嵌套对象

1 个答案: