1

好的,所以我有以下 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。

我究竟做错了什么?

4

1 回答 1

1

在您的第一次选择中,optionsValue: 'Description'您告诉敲除使用Description文本作为选择中的值。因此,您SelectedMake将包含Description文本而不是 VehicleMake 对象。

所以只需删除optionsValue它,它应该可以正常工作:

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

演示JSFiddle

于 2013-01-12T09:55:41.737 回答