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

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

这是我的密码 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>

---

您的代码有一些问题，您多次调用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);
                }
            });
        });
}

$（文档）.ready（函数（）{
$（“选择银行”）。更改（功能（）{
var e=document.getElementById（“银行”）；
var selectedObj=e.options[e.selectedIndex].value；
var procemessage=“选择”；
$.ajax({
url:“/Base/GetBranchesforBank”，
数据：{parentId:selectedObj}，
类型：“POST”，
数据类型：“json”，
成功：功能（数据）{
var markup=“选择”；
对于（var x=0；x

是的，你是对的，我多次调用它，因为当我附加一个新元素时，该元素事件需要绑定，否则它不会附加它自己的子元素，例如，静止的>{BOOKS，PAPER，PENCIL[isSelected]}>{colorpincle，WATERCOLORPENCIL}>{load childs}在$（document）上进行更改。ready（函数（）{}如果你不介意的话，在每次更改时都会自动触发它，没有必要这样处理。你可以看到我记录的链接，当你将HTML附加到标记时，它将一直存在，直到你删除它，你只需隐藏它，删除附加的HTML，然后再附加新的。如果我们有数据，我们有额外的HT，你可以在其他部分使用remove方法在前面追加的ML中，应该删除它们

SEE VIDEO LINK

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