<select> for <select> c#to javascript

Question

我有一个ViewBag.List>我有竞争,每个比赛都有一个团队列表.示例:{英超联赛:[阿森纳,切尔西等]德甲联赛名单:[拜仁慕尼黑,沃尔夫斯堡等]

我有2个选择.当用户选择第一个选择(比赛)时,我希望第二个选择将有来自比赛的队伍.如果他选择英超联赛,第二选择将有阿森纳,切尔西等.

我试图为每个比赛选择一个,如果他选择一个,那个将是可见的而其他的隐藏或没有,但所有的选择都与asp-for string 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