Question

我有一个局部视图，每次单击按钮时都会调用该视图以添加新行。最终结果如下：

要注意的重要一点是，“文档类别”会进行ajax调用并填充“文档字段”

到目前为止，我所做的是将“文档类别”更改为一类，目前仅“第一文档类别”有效，并且它以某种方式更改了所有“文档字段”，而不是其旁边的字段。

如何确保某个类只能更改其旁边的类？

JQuery for Document Categories发出ajax请求并更新Document Fields

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) {
                $(".Fields").empty();
                $(".Fields").append("<option value>Select Field</option>");
                $.each(result.fields, function (key, value) {
                    $(".Fields").append("<option value="+value.Id+">"+value.Name+"</option>");
                });
            },
            error: function (error) {
                console.log(error);
            }
        });
}

$("#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;
});

HTML代码

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

Answer 1

此行

selected = $(".Categories").find(":selected").val();

更改

selected = $(this).find(":selected").val();

当函数使用.Class时，您可以使用$(this)获取操作的当前对象。

jQuery下拉列表选择onchange附近的类

1 个答案: