Jquery 淘汰JS选项与所选选项绑定

我有一个令人难以置信的问题。 我的页面上有两个下拉列表，如下所示：

<div class="form-group">
    <label class="control-label">Current competition</label>
    <select class="form-control" data-bind="options: competitions, optionsText: 'Name', value: selectedCompetition, optionsCaption: 'Choose...'"></select>
</div>

<div class="form-group">
    <label class="control-label">Style</label>
    <select class="form-control" data-bind="options: styles, optionsText: 'Name', value: selectedStyle, optionsCaption: 'Choose...'"></select>
</div>

function init() {
    $.get(competitionsUrl)
        .done(function (data) {
            $.each(data, function (i, competition) {                    
                self.competitions.push(competition);

                if (competition.Current) {
                    self.selectedCompetition(competition);
                    self.selectedStyle(competition.Style);
                }
            });
        })
        .always(function () {
            self.loading(false);
        })
        .fail(common.handleError);

    $.get(stylesUrl)
        .done(function (data) {
            $.each(data, function (i, style) {
                self.styles.push(style);
            });
        })
        .fail(common.handleError);
};

现在，这就是有趣的部分。如果在设置后直接放置console.log（self.selectedStyle（）），则控制台中会出现未定义的。这花了一段时间，但我意识到，如果我将我的样式更改为以下选项：

<div class="form-group">
    <label class="control-label">Style</label>
    <select class="form-control" data-bind="options: styles, optionsText: 'Name'"></select>
</div>

---

如有任何帮助，我们将一如既往地不胜感激：）

正如汉斯所说，这是因为我是如何推广我的风格的。 我将init方法更改为：

function init() {
    $.get(competitionsUrl)
        .done(function (data) {
            var styleId = 0;

            $.each(data, function (i, competition) {                    
                self.competitions.push(competition);

                if (competition.Current) {
                    self.selectedCompetition(competition);
                    styleId = competition.Style.Id;
                }
            });

            $.get(stylesUrl)
                .done(function (data) {
                    $.each(data, function (i, style) {
                        self.styles.push(style);

                        if (style.Id == styleId) {
                            self.selectedStyle(style);
                        }
                    });
                })
                .always(function () {
                    self.loading(false);
                })
                .fail(common.handleError);
        })
        .fail(common.handleError);
};

---

这解决了问题。

我快速查看了一下，问题似乎是您首先加载了比赛，然后设置了比赛、选定的比赛和选定的风格。但是，由于尚未加载样式，因此选定样式在“样式”下拉列表中不作为选项存在。尝试加载样式，在

done

-回调中加载比赛，看看这是否有帮助。如果您是正确的，我将添加一个答案，这将归功于您您您可以做一些小更改，使两个请求同时进行：

function init() {
    $.get(competitionsUrl)
        .done(function (data) {
            var styleId = 0;

            $.each(data, function (i, competition) {                    
                self.competitions.push(competition);

                if (competition.Current) {
                    self.selectedCompetition(competition);
                    styleId = competition.Style.Id;
                }
            });

            $.get(stylesUrl)
                .done(function (data) {
                    $.each(data, function (i, style) {
                        self.styles.push(style);

                        if (style.Id == styleId) {
                            self.selectedStyle(style);
                        }
                    });
                })
                .always(function () {
                    self.loading(false);
                })
                .fail(common.handleError);
        })
        .fail(common.handleError);
};