Question

我正在创建一个类别表单，我想将下拉列表加载为动态。更改下拉列表后，我想将所有子元素加载到一个新的下拉列表中，类似地，如果它没有子元素，它将加载一个允许创建新文本框的新文本框。

这是我的代码的 HTML

<div id="categoryContainer" data-target="@Url.Action("GetCategoryJsonList","Master", new { parentId="parentIdVal"})">
            <div class="form-group">
            @Html.BootHzLabelFor(x => x.Category, new { @class = "" })
            <div class="col-sm-10">
                @if (Model?.CategoryList != null && Model?.CategoryList.Count > 0)
                {
                    @Html.DropDownListFor(x => x.Category, new SelectList(Model.CategoryList, "Key", "Value"), new { @class = "form-control f" })
                }
                else
                {
                    @Html.DropDownListFor(x => x.Category, new List<SelectListItem> { new SelectListItem { Text = "--Select--", Value = "" } }, new { @class = "form-control f" })
                }
            </div>
        </div>

JQUERY

$(document).ready(function () {
        loadCategories();
        $("#Name").focus();



        function onchangeCategory() {
            const propertyName = 'ParentId';
            var category = $('#ParentId, #ParentId-temp');
            category.on('change', function (d) {
                var thisOp = this;
                var sValue = this.value;
                var parent = $(this).parents('.form-group');
                var parentContainer = $(this).parents('#parentsContainer');
                var callUrl = parentContainer.data('target');
                callUrl = callUrl.replace('parentIdVal', sValue);
                var nextItems = $(this).parents('.form-group').nextAll('.form-group');
                var previousItem = $(this).parents('.form-group').prev('.form-group');
                var prevOption = $(previousItem).find('select');
                if (sValue !== "0") {
                    $(prevOption[0]).attr('id', propertyName + "-temp");
                    $(thisOp).attr('id', propertyName);

                    $.get(callUrl, function (resData) {
                        if (resData.length > 1) {
                            var options = "";
                            $.each(resData, function (i, d) {
                                var data = $(this);
                                options += "<option value=" + $(this)[0].Key + ">" + $(this)[0].Value + "</option>";
                            });
                            var itemClone = null;
                            itemClone = parent.clone(); //create clone of the current item
                            itemClone.find('select').html('');
                            itemClone.find('select').html(options);

                            parentContainer.append(itemClone);
                            onchangeCategory();
                        } else {
                            $(prevOption[0]).attr('id', propertyName + "-temp");
                            $(thisOp).attr('id', propertyName);
                            $(nextItems).remove();
                            onchangeCategory = function () { };
                        }
                    });
                } else {
                    $(prevOption[0]).attr('id', propertyName + "-temp");
                    $(thisOp).attr('id', propertyName);
                    $(nextItems).remove();
                    onchangeCategory = function () { };
                }
            });
        }
        onchangeCategory();

    });

如果我正在评论更改ID属性，此代码正常工作，否则它会为额外列表see image创建3/4次

SEE VIDEO LINK

https://drive.google.com/drive/folders/1pKqsjnSd1SbquGXG5Oal1kyBzK7i-bC2

See Image here

Answer 1

您的代码存在一些问题，您多次调用onchangeCategory（）。我在下面的项目中做了这个，希望能帮到你：

  $(document).ready(function () {
        $("select#Bank").change(function () {
            var e = document.getElementById("Bank");
            var selectedObj = e.options[e.selectedIndex].value;
            var procemessage = "<option value='0'>select</option>";
            $.ajax({
                url: "/Base/GetBranchesforBank",
                data: { parentId: selectedObj },
                type: "POST",
                dataType: "json",
                success: function (data) {
                    var markup = "<option value='0'>select</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                    }
                    $("select#branch").html(markup).show();
                },
                error: function (reponse) {
                    alert("error : " + reponse);
                }
            });
        });
}

在JQuery中加载动态级联下拉列表？

1 个答案: