如何在下拉菜单中选择一个选项 [英] How to pre-select an option in a dropdown knockout js

问题描述

我看过这个其他问题，但是无法让我的选择框正常工作：
Knockout JS绑定初始值/下拉列表（默认值）列表

得到以下Game对象：

  function Game（visitTeamDetails，homeTeamDetails，game）{
 if（arguments.length > 0）{
 this.VisitingTeamDetails = visitTeamDetails; 
 
 this.HomeTeamDetails = homeTeamDetails; 
 
 this.GameId = ko.observable（game.GameId）; 
 this.HomeTeamName = ko.observable（game.HomeTeamName）; 
 this.VisitingTeamName = ko.observable（game.VisitingTeamName）; 
 this.SportTypeName = ko.observable（game.SportTypeName）; 
 this.HomeAccountName = ko.observable（game.HomeAccountName）; 
 this.VisitingAccountName = ko.observable（game.VisitingAccountName）; 
 this.GameDateString = ko.observable（game.GameDateString）; 
 this.GameTimeString = ko.observable（game.GameTimeString）; 
 this.AvailableSportTypes = ko.observableArray（game.Sports）; 
 
 this.sportTypeFunction = function（）{
 for（sportType in this.AvailableSportTypes（））{
 if（this.AvailableSportTypes（）[sportType] .Name == this .SportTypeName（））{
 return this.AvailableSportTypes（）[sportType]; 
} 
} 
返回null; 
}; 
 
 this.SportType = ko.observable（game.SportType）; 
} 
} 
  

SportType是一个名字和 SportTypeId 。

我有以下模板：

 < td rowspan =3>< select data-bind =options：AvailableSportTypes，value：SportType，optionsText：'Name' ，optionsCaption：'Choose ...'class =sportType>< / select>< / td> 
  

AvailableSportTypes 是 SportType 。

下拉列表中列出了SportTypes的名称，但我无法做出初始选择为 SportType 。我写了 sportTypeFunction 来表明自己的数据正确进入，它会选择正确的值，但是在下拉菜单中更改我的选择不会更新SportType。 p>

我确信我做错了事情。任何人看到？

谢谢

解决方案

当 game.SportType 被传入，它需要是对 game.AvailableSportTypes 中的一个项目的引用，而不仅仅是一个对象看起来一样。

基本上两个对象不相等，除非它们实际上是对同一个对象的引用。

  var a = {name：test}，
 b = {name：test}; 
 
 alert（a === b）; // false 
  

所以，你需要调用你的函数来定位数组中的正确对象，将其设置为您的可观察值的值。

不是更好，但在KO 1.3中，您可以扩展 .fn 的observables，observableArrays和dependentObservables来添加额外的功能。

以下是一个示例： http://jsfiddle.net / rniemeyer / ZP79w

I've looked at this other question, but can't get my select box to work correctly: Knockout JS binding initial/default value of dropdown (select) list

I've got the following Game object:

function Game(visitingTeamDetails, homeTeamDetails, game) {
if (arguments.length > 0) {
    this.VisitingTeamDetails = visitingTeamDetails;

    this.HomeTeamDetails = homeTeamDetails;

    this.GameId = ko.observable(game.GameId);
    this.HomeTeamName = ko.observable(game.HomeTeamName);
    this.VisitingTeamName = ko.observable(game.VisitingTeamName);
    this.SportTypeName = ko.observable(game.SportTypeName);
    this.HomeAccountName = ko.observable(game.HomeAccountName);
    this.VisitingAccountName = ko.observable(game.VisitingAccountName);
    this.GameDateString = ko.observable(game.GameDateString);
    this.GameTimeString = ko.observable(game.GameTimeString);
    this.AvailableSportTypes = ko.observableArray(game.Sports);

    this.sportTypeFunction = function () {
        for (sportType in this.AvailableSportTypes()) {
            if (this.AvailableSportTypes()[sportType].Name == this.SportTypeName()) {
                return this.AvailableSportTypes()[sportType];
            }
        }
        return null;
    };

    this.SportType = ko.observable(game.SportType);
}
}

SportType is an object with Name and SportTypeId.

I have the following template:

 <td rowspan="3"><select data-bind="options: AvailableSportTypes, value: SportType, optionsText:'Name', optionsCaption: 'Choose...'" class="sportType"></select></td>

AvailableSportTypes is a list of SportType.

The list is coming in with the names of the SportTypes in the drop down list, but I can't make the initial selection be SportType. I wrote sportTypeFunction to show myself that the data was coming in correctly, and it would select the correct value, but changing my selection in the drop down would not update SportType.

I'm sure I'm doing something wrong. Anyone see it?

Thanks

解决方案

When game.SportType gets passed in, it needs to be a reference to the an item in the game.AvailableSportTypes and not just an object that looks the same.

Basically two objects are not equal unless they are actually a reference to the same object.

var a = { name: "test" },
    b = { name: "test" }; 

    alert(a === b); //false

So, you would need to call your function to locate the correct object in the array and set it as the value of your observable.

Not that it is way better, but in KO 1.3 you can extend .fn of observables, observableArrays, and dependentObservables to add additional functionality.

Here is a sample: http://jsfiddle.net/rniemeyer/ZP79w

这篇关于如何在下拉菜单中选择一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！