<select> for <select> c# to javascript

Question

我有一个 ViewBag.List > 我有比赛，每场比赛都有一个团队列表。 示例：{Premier League 列表：[Arsenal、Chelsea 等] 德甲：[拜仁慕尼黑、沃尔夫斯堡等]

我有 2 个选择。当用户选择第一个选择（比赛）时，我希望第二个选择将有来自比赛的团队。如果他选择英超联赛，第二选择将有阿森纳、切尔西等。

我尝试为每场比赛选择一个，如果他选择了一个，那一个将是可见的，而另一个隐藏或没有，但是所有的选择都与 asp-for 字符串 CurrentTeam 链接，我不能放数据库中的团队。

另一个选项是使用 javascript 函数。 每当用户选择比赛 -> onclick = "myfunction(this)" 在那个函数中我有这样的东西：

    function myFunction(select) {
        var sel = document.getElementById("teams");
        if (select.value == 'Premier League') {
            sel.innerHTML = "";

            @foreach(var team in ViewBag.List[0])   // Premier League
            {
            @: var x = document.createElement("OPTION");
            @: x.setAttribute("value", @team);
            @:var t = document.createTextNode(@team);
            @: x.appendChild(t)
            @: sel.appendChild(x);
                }
        }
        else // the other competitions

但我不能在 javascript 函数中使用 ViewBag。

我只想要一个对另一个选择做出反应的选择并将这两个东西放入数据库中。 有什么建议 ？ 谢谢！

Answer 1

在您的视图中，您可以构建一个包含所有联赛和球队的 JavaScript 对象，然后在您的 JavaScript 代码中读取该对象：

控制器：

[HttpGet]
public ActionResult Index()
{
    ViewBag.List = new Dictionary<string, string[]>
    {
        { "Premier League", new[] { "Arsenal", "Chelsea" } },
        { "Bundesliga",     new[] { "Bayern Munchen", "Wolfsburg" } },
    };

    return View();
}

查看：

...
<script type="text/javascript">

    //Complete list of leagues and their teams:
    var leagues = {
        @foreach(var l in ViewBag.List)
        {
            @: '@l.Key': [
                    foreach(var team in ViewBag.List[l.Key])
                    {
                        @: '@team',
                    }
            @:  ],
        }
    };
    ...

示例：

https://dotnetfiddle.net/d0FrGr