Passing selected item data to controller from Multilevel dropdown

Solution for Passing selected item data to controller from Multilevel dropdown
is Given Below:

I have created a multilevel dropdown which is dynamic. When I am clicking the third level item(new, in progress, resolved which are from the database)it should be selected and only when I am clicking the create button that selected item data should be passed to the controller.

multilevel dropdown code

 <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 create method

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

Need to get the selected list item data to the post method

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

You can try to put the selected item value to a hidden input,and then change the background of the <li></li>.Here is a demo:

    <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>

When select ProjectStatus,the selected value will be put to $("#ProjectStatus"),and the value of $("#DevelopmentStatus") will be "".When select DevelopmentStatus,the selected value will be put to $("#DevelopmentStatus"),and the value of $("#ProjectStatus") will be "".

result:
enter image description here