Загрузка динамического каскадного выпадающего списка в JQuery?

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, иначе он создает 3/4 раза для дополнительного списка see image

SEE VIDEO LINK

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

См. Изображение здесь

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);
                }
            });
        });
}