Question

我正在使用knockout.js作为前端数据操作器使用Web应用程序，并使用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());

这是我尝试过的最后一件事（从服务器响应中得到一个＆＃34; name＆＃34;属性来自对象数组），但是控制台抛出错误：

Uncaught TypeError：无法处理绑定＆＃34; text：function（）{return citiesSelected（）。name}＆＃34; 消息：无法读取属性＆＃39; name＆＃39;未定义的

不使用div中的属性data-bind显示值，但我需要文本。

我在Knockout很新，所以也许我犯了一个巨大的新手错误，但我会帮助你做很多帮助。

Answer 1

如果删除以下内容，则可以：

optionsValue:'id'

当您设置optionsValue属性时，您告诉Knockout将selectedCities设置为等于所选城市的ID。这就是为什么你得到错误声明name属性不存在的原因。你本质上是试图绑定到selectedCities.id.name，它肯定不存在。通过删除optionsValue属性，您将捕获整个选定的城市对象，绑定将按预期评估name属性。

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

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

1 个答案: