javascript - 从 Knockout.js 的下拉列表中获取选定的值

标签 javascript knockout.js

我是 knockout 新手,在从下拉列表中获取选定值时遇到问题。我尝试将值更改为“selectedCity”,但我得到了[Object object]。谢谢!

我的 HTML

<select data-bind="options: Cities, optionsText: 'CityNameRu', value: selectCity">
</select>

<span data-bind="text: selectedCity"></span>

knockout

function CityModel(data) {
    var self = this;
    this.CityId = ko.observable(data.CityId);
    this.CityNameRu = ko.observable(data.CityNameRu);
    this.CityName = ko.observable(data.CityName);
}

function ViewModel() {
    var self = this;
    self.Cities = ko.observableArray([]);
    self.selectedCity = ko.observable();

    self.selectCity = function (city) {
        self.selectedCity(city.CityNameRu);
    };

    self.GetCities = function () {
        $.ajax({
            type: "GET",
            url: '/FetchCities',
            dataType: "json",
            success: function (data) {
                self.SuccessfullyRetrievedModelsFromAjax(data);

            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    };

    this.SuccessfullyRetrievedModelsFromAjax = function (models) {
        ko.utils.arrayForEach(models, function (model) {
            self.Cities.push(new CityModel(model));
        });
    };

JSON 响应:

[{"CityId":1,"CityName":"philadelphia","CityNameRu":"Филадельфия"},{"CityId":2,"CityName":"new-york","CityNameRu":"Нью Йорк"}

最佳答案

将整个城市对象设置为 selectedCity 的值。您还可以添加计算的可观察量来检索文本。

function ViewModel() {
    var self = this;
    self.Cities = ko.observableArray([]);
    self.selectedCity = ko.observable();

    self.selectCity = function (city) {
        self.selectedCity(city);
    };

    self.selectedCityNameRu = ko.pureComputed(function () {
        var selectedCity = self.selectedCity();
        return selectedCity ? selectedCity.CityNameRu : '';
    }, self);

然后在您的 html 中绑定(bind)到 selectedCityNameRu

<span data-bind="text: selectedCityNameRu"></span>

关于javascript - 从 Knockout.js 的下拉列表中获取选定的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38193457/

相关文章:

javascript - 如何阻止 dojo 滚动以形成焦点小部件?

JavaScript SetInterval 帮助。 Ajax

javascript - 带 CSS 动画的 Knockout 输入验证

javascript - 如何使用模板中的 Knockout 映射插件映射到来自服务器对象的数组?

javascript - 在谷歌图表中设置列颜色

javascript - 单击后 Fancybox 删除蓝色轮廓

javascript - 如何嵌套数据绑定(bind)文本

knockout.js - 无法在 knockout 3.2 中使用自定义组件传递变量

asp.net - 如何将 session 值传递给外部js文件

javascript - 替换 observableArray 中的项目