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

Question

I'm working with a web app using knockout.js as front-end data manipulator, and fetching de data from the server with AJAX calls.

I have a series of drop-downs which are populated via AJAX, using id as values and strings as optionText, and I need to catch, in different divs, the optionText of the selected option of these drop-downs. So far, using different methods from other Stack Overflow answers, I've not been able to do it.

Here is the code:

View

<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>

Viewmodel

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());

This is the last thing I tried (get a "name" property that comes in the array of objects from the server response), but the console throws the error:

Uncaught TypeError: Unable to process binding "text: function (){return citiesSelected().name }" Message: Cannot read property 'name' of undefined

Not using the property in the div data-bind shows the value, but I need the text.

I'm quite new at Knockout, so maybe I'm making a huge newbie mistake, but I would apreciate a lot your help.

Answer 1

If you remove the below, it works:

optionsValue:'id'

When you set the optionsValue attribute, you are telling Knockout to set selectedCities equal to the id of the selected city. That is why you got the error stating that the name property doesn't exist. You were essentially trying to bind to selectedCities.id.name which definitely doesn't exist. By removing the optionsValue attribute, you will be capturing the entire selected city object, and the binding will evaluate the name property as expected.

Working fiddle: https://jsfiddle.net/dw1284/dqzb3zwn/1/