如何从Ajax跨多个形式设置相同的下拉列表

Question

我在不同的手风琴元素中有多个相同形式的实例。每种形式代表一个不同的项目。我试图通过动态存储的管理人员列表在表单上填充下拉菜单。我只能获取第一个下拉实例，而不是其余的。如何获得经理下拉列表的所有实例？

html

@foreach (Project project in Model.Projects)
{
    <div class="accordion-item">
        <h2 class="accordion-header" id="@("heading"+project.Key)">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" aria-expanded="false">
                <b> @project.Number- </b>: @project.Name
            </button>
        </h2>
        <div class="accordion-body">
            <form>
                <div class="mb-3 row">
                    <label for="manager" class="col-sm-1 col-form-label">Manager</label>
                    <div class="col-sm-3">
                        <select class="form-control capManager" asp-for="@project.Manager"></select>
                    </div>
                    <label for="budgetYear" class="col-sm-2 col-form-label" style="text-align: right">Budget Year</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" asp-for="@project.BudgetYear">
                    </div>
                    <label for="budgetQuarter" class="col-sm-1 col-form-label">Quarter</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" asp-for="@project.BudgetQuarter">
                    </div>
                    <div class="col-sm-3"></div>
                </div>
            </form>
        </div>
    </div>
}

javascript

function populateManagerOptions() {
    //Populate Manager options
    $.ajax({
        url: '/Lookup/GetProjManagerData/',
        type: 'GET',
        data: {
            'reason': 'dropdown'
        },
        dataType: 'json',
        success: function (json) {
            const collection = document.getElementsByClassName("capManager");
            for (let i = 0; i < collection.length; i++) {
                $.each(json, function (i, value) {
                    collection[i].append($('<option>').text(value.mgrname).attr('value', value.projmgr));
                });
            }
        }
    });
}

控制器

[HttpGet]
public IActionResult GetProjManagerData(string reason)
{
   try
   {
       IEnumerable<TblProjmgr> codes = _context.TblProjmgr.AsEnumerable();
       if (reason == "dropdown")
           return Json(codes);
       else
           return Json(new { data = codes });
   }
   catch (Exception ex)
   {
       _logger.LogError(ex, DateTime.Now + "- Error occured during GetCauseData()");
       return Json(new { error = ex.Message.ToString() });
   }
}

如何正确填充每种形式的管理器选择？

Answer 1

我发现答案是我需要在创建模型数据时创建下拉菜单的实例。因此，对于model.projects的每个实例；我将每个项目与所选值一起定义了完整的下拉列表。

然后，我使用剃须刀来定义下拉词：

<select class="form-select" asp-for="@project.Manager" asp-items="@project.ManagerList"></select>