Question

我有一个包含大量DropDownList的表，我根据迭代更改了每个类名：

<table id="categoryTable" class="table table-striped table-hover">
    <tr class="header">
        <th>
            @Html.DisplayNameFor(model => model.Category)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.SubCategory)
        </th>
        <th>New Category</th>
        <th>New Subcategory</th>
        <th></th>
    </tr>

    @if (Model != null) { int i = 1; foreach (var item in Model) {

    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Category)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.SubCategory)
        </td>

        <td>
            <input type="hidden" class="varIteration" value="@i" /> @Html.DropDownList("CategoryId", null, "Select Your Category", htmlAttributes: new { @class = "form-control Category" + i })
        </td>
        <td>
            <input type="hidden" class=@( "SubCategoryID_CategoryID_initial"+@i) value="@i" /> @Html.DropDownList("SubCategoryId", null, "Select Your Subcategory", htmlAttributes: new { @class = "form-control SubCategory" + i })
        </td>
        <td>
            <button type="submit" class="btn">
                <i class="fa fa-check"> Update</i>
            </button>
            @*
            <input type="submit" value="Save" class="fa fa-check" />*@
        </td>
    </tr>
    i++; } }

</table>

我需要使用下面的下一个脚本根据类别中的选定值更改子类别值，该脚本仅在第一个类别下拉列表中不能正常工作：

$(document).ready(function(e) {
    var iteration = $(".varIteration").val(); // iteration = 1 only
    getSubCat(true, $(".SubCategoryID_CategoryID_initial" + iteration).val(), iteration);
    $(document).on("change", ".Category" + iteration, function(event) {
        getSubCat(false, $(".Category" + iteration).val(), iteration);
    });

    function getSubCat(load, changed, iteration) {
        alert(iteration)
        var url = "/auc.accesscontrol/profiles/GetSubCatIDByCatID";
        var initialSubCat = $(".SubCategoryID_CategoryID_initial").val();
        var initialCat = $(".SubCategoryID_SubCategoryID_initial").val();
        if (load) {
            $('.Category' + iteration + ' option[value="' + initialCat + '"]').prop("selected", true);
        }
        if (initialCat == null) {
            changed = $(".Category" + iteration).val();
        }
        $.getJSON(url, {
            id: changed
        }, function(data) {
            alert(changed);
            $(".SubCategory" + iteration).empty();
            $(".SubCategory" + iteration).append("<option value= '0'>Select Your Subcategory</option>");
            $.each(data, function(index, item) {
                $(".SubCategory" + iteration).append("<option value='" + item.SubCategoryId + "'>" + item.Name + "</option>");
                $('.SubCategory' + iteration + ' option[value="' + initialSubCat + '"]').prop("selected", true);
            });
        });
    };
});

当我检查视图类名称时，会找到类别的下拉列表，如：Category1，Category2，...等和子类别：SubCategory1，Subcategory2，....等隐藏的输入值：将根据上一个i进行更改。需要帮助来根据所选类别下拉列表更改迭代变量。

编辑：这是JsonResult函数：

public JsonResult GetSubCatIDByCatID(int id)
    {
        db.Configuration.ProxyCreationEnabled = false;
        var subCategoryList = db.SubCategory.Where(m => m.CategoryId == id).ToList();
        return Json(subCategoryList, JsonRequestBehavior.AllowGet);
    }

Answer 1

执行此操作时：

$(".varIteration").val()

如果有多个匹配元素（在这种情况下有），那么您对单个值的期望是什么？从行为的描述来看，它听起来像第一个匹配元素的值。

在事件中获取iteration值，而不是在页面级别。因此，首先将事件处理程序创建更改为以下内容：

$(document).on("change", "[class^=Category]", function(event) { //... });

这将找到class“以”"Category"开头的所有元素，无论其他类名是什么。

然后，在该事件处理程序中，您可以动态导航DOM以查找所需的特定 iteration值。对于您显示的HTML，看起来像这样：

var iteration = $(this).closest("td").find(".varIteration").val();

这基本上意味着：


从引发change事件的元素开始，向上导航DOM到第一个<td>元素，然后在该元素中找到任何匹配的.varIteration元素。

由于在该范围内只有一个 .varIteration元素，因此它将具有您正在寻找的价值。

您仍然需要调整getSubCat()的调用，因为它也会尝试使用该值。我不清楚这个功能究竟应该做什么，所以我只能就此提出建议。如果确实需要为iteration的每个可能值调用它，那么您可以将该范围的值放在某个变量中并在循环中调用getSubCat()。虽然AJAX调用同一资源的循环看起来效率很低。我怀疑有一种更好的方法可以做你正在尝试使用该功能的任何事情。

但至少对于您在上述评论中描述的问题：


迭代变量始终等于1

那是因为你只得到一个值，而且它是第一个匹配的值。


点击任何其他下拉列表
时会发生任何事情

那是因为您只为该匹配值创建了一个change处理程序。

为所有匹配元素创建一个更改处理程序，并在该更改处理程序中动态获取所需的值。

Answer 2

我使用以下代码解决了它： HTML视图：

        <table id="categoryTable" class="table table-striped table-hover">
        <tr class="header">
            <th>
                @Html.DisplayNameFor(model => model.Category)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SubCategory)
            </th>
            <th></th>
        </tr>

        @if (Model != null)
        {
            int i = 1;
            foreach (var item in Model)
            {

                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Category)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SubCategory)
                    </td>
                    <td>
                        <div class="col-md-10">
                            <input type="hidden" id="varIteration" value="@i" />
                            @Html.DropDownListFor(m => item.Category, new SelectList(db.Category.Where(x => !x.IsDeleted), "CategoryId", "Name"), "Select Your Category", htmlAttributes: new { @class = "form-control Category", @id = "Category" + i })
                        </div>
                    </td>
                    <td>
                        <div class="col-md-10">
                            <input type="hidden" id="SubCategoryID_CategoryID_initial" value="@item.SubCategory" />
                            @Html.DropDownListFor(m => item.SubCategory, new SelectList(db.SubCategory.Where(x => !x.IsDeleted), "SubCategoryId", "Name"), "Select Your Subcategory", htmlAttributes: new { @class = "form-control", @id = "SubCategory" + i })
                        </div>
                    </td>


                    <td>
                        @Html.ActionLink("    ", "UnifiedAccessCategoryIndex", new { Category = item.Category, Subcategory = item.SubCategory }, new { @class = "fa fa-edit fa-lg" })
                        @*<button type="submit" class="btn">

                                <i class="fa fa-check"> Update</i>
                            </button>*@
                        @*<input type="submit" value="Save" class="fa fa-check" />*@
                    </td>
                </tr>
                i++;
            }
        }

    </table>

在我的JS代码中：

$(document).ready(function (e) {
    var iteration = null;
    getSubCat(true, $('[class^=SubCategoryID_CategoryID_initial]').val(), iteration);
    $(document).on("change", 'select[id^=Category]', function (event) {
        iteration = $(this).closest("td").find("#varIteration").val();
        getSubCat(false, $('#Category' + iteration).val(), iteration);
    });
});
function getSubCat(load, changed, iteration) {
    var url = "/auc.accesscontrol/profiles/GetSubCatIDByCatID";

    var initialSubCat = $('[id^="SubCategoryID_CategoryID_initial"]').val();
    var initialCat = $('[id^="SubCategoryID_SubCategoryID_initial"]').val();
    if (load) {

        $('#Category' + iteration + ' option[value="' + initialCat + '"]').prop("selected", true);
    }
    if (initialCat == null) {
        changed = $('#Category' + iteration).val();
    }
    $.getJSON(url, { id: changed }, function (data) {
        $('#SubCategory' + iteration).empty();
        $('#SubCategory' + iteration).append("<option value= '0'>Select Your Subcategory</option>");
        $.each(data, function (index, item) {
            $('#SubCategory' + iteration).append("<option value='" + item.SubCategoryId + "'>" + item.Name + "</option>");
            $('#SubCategory' + iteration + ' option[value="' + initialSubCat + '"]').prop("selected", true);
        });
    });
};

根据选定的DropDownList更改JavaScript变量

2 个答案: