将所选项目数据从多级下拉列表传递到控制器

Question

我创建了一个动态的多级下拉菜单。 当我单击第三级项目（来自数据库的新的、进行中的、已解决的）时，它应该被选中，并且只有当我单击创建按钮时，选定的项目数据才应该传递给控制器​​.

多级下拉代码

 <div class="dropdown drop">
            <button class="btn  dropdown-toggle"
                    type="button"
                    id="dropdownMenuButton"
                    data-mdb-toggle="dropdown"
                    aria-expanded="false">
                STATUS
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

                <li>
                    <a class="dropdown-item" href="#">
                        ProjectStatus &raquo;
                    </a>
                    <ul class="dropdown-menu dropdown-submenu">
                        @foreach (var i in ViewBag.ProjectStatus)
                        {
                        <li>
                            @*<a id="ProjectStatus" class="dropdown-item" href="#">@i.Text</a>*@
                            <select asp-for="ProjectStatus" class="form-control" value="@i.Text">@i.Text</select>
                        </li>
                        }
                    </ul>
                </li>
                <li>
                    <a class="dropdown-item" href="#">
                        DevelopmentStatus &raquo;
                    </a>
                    <ul class="dropdown-menu dropdown-submenu">
                        @foreach (var i in ViewBag.DevelopmentStatus)
                        {
                        <li>
                            <a class="dropdown-item" href="#">@i.Text</a>
                        </li>
                        }
                    </ul>
                </li>
            </ul>
        </div>

HttpGet 创建方法

public IActionResult Create()
{
    ViewBag.ProjectStatus = new SelectList(_context.ProjectStatus, "ProjectStatusID", "Status");
    ViewBag.DevelopmentStatus = new SelectList(_context.DevelopmentStatus, "DevelopmentStatusID", "Status");
    return View();
}

需要获取选中的列表项数据给post方法

[HttpPost]
public async Task<IActionResult> Create(Projects ec) {}

Answer 1

你可以尝试将selected item value 设置为隐藏输入，然后改变<li></li>的背景。这里有一个演示：

    <div class="dropdown drop">
        <button class="btn  dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-mdb-toggle="dropdown"
                aria-expanded="false">
            STATUS
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    
            <li>
                <a class="dropdown-item" href="#">
                    ProjectStatus &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                    @foreach (var i in ViewBag.ProjectStatus)
                    {
                        <li>
                            <a class="dropdown-item" href='#' onclick='return change("@i.Text",this,"ProjectStatus")'>@i.Text</a>
                        </li>
                    }
    
                </ul>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    DevelopmentStatus &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                    @foreach (var i in ViewBag.DevelopmentStatus)
                    {
                        <li>
                            <a class="dropdown-item" href='#' onclick='return change("@i.Text",this,"DevelopmentStatus")'>@i.Text</a>
                        </li>
                    }
                </ul>
            </li>
        </ul>
    </div>
    <input id="ProjectStatus" name="ProjectStatus" hidden />
    <input id="DevelopmentStatus" name="DevelopmentStatus" hidden />
<script>
    function change(text, t, type) {
        $("li").css("background", "transparent");
        if (type == "ProjectStatus") {
            $("#ProjectStatus").val(text);
            $("#DevelopmentStatus").val("");
        } else {
            $("#DevelopmentStatus").val(text);
            $("#ProjectStatus").val("");
        }
        $(t).parent().css("background", "#1266f1");
        return false;
    }
</script>

当 select ProjectStatus 时，selected 的值将被放入 $("#ProjectStatus")，而 $("#DevelopmentStatus") 的值将是 ""。当 select DevelopmentStatus，selected 的值将被放入 $("#DevelopmentStatus")，而 $("#ProjectStatus") 的值将是 ""。

结果：