-1

我是淘汰赛和 mvc 的新手。我试图查看来自淘汰赛和复数视力的许多文档，但我似乎无法将所有内容放在一起。这就是我所拥有的：我有一个从我的 api 返回的 json 数据：

[{
ID: 1,
LongName: "My Long Name",
ShortName: "Long",
Rank: 10
},
{
ID: 2,
LongName: "My second long name",
ShortName: "Short",
Rank: 20
}]

在我的 javascript 中，我有：

<script type="text/javascript">
    $(function () {
        $.getJSON("../api/myData", function (data) {
            alert(data[0].ID);
        });
    });
</script>

我想创建一个从我的 json 数据（longname 和 id）中填充的下拉菜单。当用户选择时，另一个菜单会根据选择动态填充。我还使用 Knockout 映射器脚本吗？请帮忙。谢谢

4

1 回答 1

1

这是一个可以帮助您的示例小提琴。

http://jsfiddle.net/jearles/LpwgQ/

OptionsUI 首先通过 AJAX 调用加载下拉列表。加载后，您可以选择其中一个选项，这将触发子选项的加载。选择选项 1，它将加载一组子选项，切换到选项 2，它将加载一组不同的子选项。将初始选项切换回其“默认”，第二个菜单将消失。

在我的代码中，我确实使用了mapping插件。它使将返回的 JSON 转换为 observables 和 observableArrays 的工作非常容易。是否使用它取决于您的要求。

--

HTML

<select data-bind="options: options, optionsText: 'LongName', optionsValue: 'ID', value: selectedOption, optionsCaption: '-Select-'"></select>

您使用 Knockout 绑定将返回的选项映射到选择。有关详细信息，请参阅选项绑定。 options指向一系列选择的指向，optionsText告诉淘汰赛用作文本optionsValue并将填充该值的淘汰，value这是在选择选项时可以观察到的淘汰赛，并optionsCaption在没有选择时提供文本。

通过订阅，selectedOption您可以在它更改时做出反应，如果需要加载子选项，请进行另一个 AJAX 调用。

JS

self.selectedOption.subscribe(function(newValue) {
    // Reset the suboptions
    self.suboptions([]);

    // If we have selected an option go get the suboptions
    if (newValue) {
      ...
    }
});
于 2012-11-09T01:37:57.577 回答