Question

我有这个HTML，它将重复几次。我希望.Categories类在ajax请求完成后更新最近的同级.Fields类。我也尝试过使用use.find，但似乎没有任何作用。

<div class="col-sm-12 row">
    <div class="col-sm-3 search-spacing">
        <label>Document Categories</label>
        @Html.DropDownListFor(m => m.CategoryId, (SelectList)Model.Categories, "Select Category", new { @class = "form-control Categories" })
    </div>
    <div class="col-sm-3 search-spacing">
        <label>Document Fields</label>
        @Html.DropDownListFor(m => m.FieldId, (SelectList)Model.DocumentFields, "Select Field", new { @class = "form-control Fields" })
    </div>
    <div class="col-sm-3 search-spacing">
        <label for="Data">Data</label>
        <input type="text" id="Data" placeholder="Search" />
    </div>
</div>

$("#datatable-search-input-container").on("change", ".Categories", function (e) {
    console.log("changed");
    selected = $(".Categories").find(":selected").val();
    var form_data = selected;
    refreshDropdown(form_data);
    return false;
});

function refreshDropdown(Input) {
    $.ajax({
            url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: JSON.stringify(Input),
            contentType: "application/json",
            success: function (result) {
                var parent = $(this).closest(".search-spacing");
                parent.find(".Fields").empty();
                console.log(parent);
            },
            error: function (error) {
                console.log(error);
            }
        });
}

Answer 1

尝试refreshDropdown.call(this, form_data)中的this内的refreshDropdown指的是触发element的{{1}}。还要缓存它，因为event中的this更改。

ajax listeners

Answer 2

我将更改您的函数以传递类别输入：

$("#datatable-search-input-container").on("change", ".Categories", function (e) {
    console.log("changed");
    var $thisCategory = $(this);
    refreshDropdown($thisCategory);
    return false;
});

function refreshDropdown(Input) {
    var form_data = Input.find(":selected").val();
    $.ajax({
            url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: JSON.stringify(form_data),
            contentType: "application/json",
            success: function (result) {
                var parent = Input.parent();
                parent.next().find(".Fields").empty();
                console.log(parent);
            },
            error: function (error) {
                console.log(error);
            }
        });
}

jQuery无法获得最接近的兄弟

2 个答案: