Knockout.js：从填充了 ajax 调用的选择中获取选项文本

Question

我正在使用 knockout.js 作为前端数据操纵器的网络应用程序，并使用 AJAX 调用从服务器获取数据。

我有一系列通过 AJAX 填充的下拉列表，使用 id 作为值，使用字符串作为 optionText，我需要在不同的 div 中捕获这些下拉列表中所选选项的 optionText。到目前为止，使用与其他 Stack Overflow 答案不同的方法，我一直无法做到。

代码如下：

查看

<div>
     <select data-bind="options: provinces,optionsText:'name',optionsValue:'id',value: provincesSelected "></select>
        <select data-bind="options: regions,optionsText:'name',optionsValue:'id',value: regionsSelected"></select>
     <select data-bind="options: cities,optionsText:'name',optionsValue:'id',value:citiesSelected"></select>
</div> 
<div>
    <div>
        <div>
            <div>
                <span data-bind="text: citiesSelected().name"></span>
            </div>     
        </div>
    </div>     
</div>

视图模型

function getProvinces(provinces) {
$.ajax({
    url: "resturl1",
    type: "POST",
    success: function (data) {
        var dats = JSON.parse(data);

        provinces(dats);
        return provinces;

    }
});}function getRegionsByProvince(regions, province) {
$.ajax({
    url: "resturl2",
    type: "POST",
    data: {province: province},
    success: function (data) {
        var dats = JSON.parse(data);

        regions(dats);

        return regions;

    }
});}function getCitiesByRegion(cities, region) {
$.ajax({
    url: "resturl3",
    type: "POST",
    data: {region: region},
    success: function (data) {
        var dats = JSON.parse(data);

        cities(dats);

        return cities;

    }
});}

function AppViewModel() {
var self = this;

self.provinces = ko.observableArray();
self.provincesSelected = ko.observable();
self.regions = ko.observableArray([]);
self.regionsSelected = ko.observable();
self.cities = ko.observableArray([]);
self.citiesSelected = ko.observable();

self.provinces(getProvinces(self.provinces));

self.provincesSelected.subscribe(function (val) {
    self.regions(getRegionsByProvince(self.regions, val));
});
self.regionsSelected.subscribe(function (val) {
    self.cities(getCitiesByRegion(self.cities, val));
});


}ko.applyBindings(new AppViewModel());

这是我尝试的最后一件事（从服务器响应中获取对象数组中的“名称”属性），但控制台抛出错误：

未捕获的类型错误：无法处理绑定“文本：函数 (){return citiesSelected().name }” 消息：无法读取未定义的属性“名称”

不使用 div 数据绑定中的属性显示值，但我需要文本。

我是 Knockout 的新手，所以也许我犯了一个巨大的新手错误，但我非常感谢你的帮助。

Answer 1

如果您删除以下内容，它会起作用：

optionsValue:'id'

当您设置 optionsValue 属性时，您是在告诉 Knockout 将 selectedCities 设置为等于所选城市的 id。这就是为什么您收到错误消息，指出 name 属性不存在。您实际上是在尝试绑定到绝对不存在的 selectedCities.id.name 。通过删除 optionsValue 属性，您将捕获整个选定的城市对象，并且绑定将按预期评估 name 属性。

工作小提琴：https://jsfiddle.net/dw1284/dqzb3zwn/1/