Question

我的下拉HTML：

<div class="col-sm-10">
    <select id="gender" class="form-control"
            data-bind="
            value: gender.id(),
            options: $root.genders,
            optionsText: 'name',
            optionsCaption:'Select ...',
            optionsValue:'id' ">
    </select>
</div>

我的观点模型：

//
//Child class
//
var child = function(c){
    var self = this;
    self.id = ko.observable(c.id);
    self.first_name = ko.observable(c.first_name);
    self.last_name = ko.observable(c.last_name);
    self.gender_id = ko.observable(c.gender_id);
    self.birthday= ko.observable(c.birthday);
    self.family_id = ko.observable(c.family_id);
    self.gender = {
        id: ko.observable(c.gender.id),
        name: ko.observable(c.gender.name)
    }
}

//
// Children viewmodel
//
var childrenViewModel = function(initialData){
    var self = this;
    //
    self.child = ko.observable();
    //
    self.children = ko.observableArray(initialData.map(function(c){
        return new child(c);
    }));
    self.genders = ko.observableArray();
    //
};

问题是，当我更改下拉列表中的选项时，子项的性别ID仅更新而不是名称属性。

我尝试将text绑定到gender.name()但没有运气

性别可观察：

"genders": [
    {
      "id": 1,
      "name": "Male"
    },
    {
      "id": 2,
      "name": "Female"
    },
    {
      "id": 3,
      "name": "Other"
    }
  ],

Answer 1

在选项值中，使用 $ data 而不是 id 。它绑定数据 gender_id ，您的选择框应如下所示：

<select id="gender" class="form-control"
    data-bind="value: gender_id,
    options: $root.genders,
    optionsText: 'name',
    optionsCaption:'Select ...',
    optionsValue:$data ">
</select

如何更新选定的文本以及淘汰范围下拉列表中的值

1 个答案: