C# Asp.net 级联下拉选择列表使用可搜索选项列表插件

Question

随着问题的转移，开始了一个新问题。您可以在这篇文章中了解我们是如何做到这一点的。 stackoverflow.com/questions/60379943

我现在有工作代码，但由于某种原因，脚本格式干扰了下拉选择列表的填充。我可以通过从页面中删除此代码来获取要在视图中填充的列表。

$(function () {
    $('select').searchableOptionList({
        maxHeight: '250px'
    });
});

所有这些都是使下拉列表格式化为一种样式，并且选择列表是单选按钮。出于某种原因，这使我的下拉菜单填充。我在想这可能是一个“首先加载什么”的问题。此代码位于剃刀页面的顶部，而我的 Javascript 位于底部。我真的不想失去下拉菜单的样式。这是所谓的“NiceDropdown”的一部分。

希望有人对此有所了解，可以帮助解决问题。

上面链接的最后一篇文章包含所有代码。我不想在另一个问题中重复代码。

感谢您的帮助！

更新：在阅读此插件时。为了使用它，您必须使用“searchableOptionList”格式化调用。需要找到一种方法来合并 onchange 并使用上面的选项..

更新： 这是我尝试从原始到尝试转换的代码。

原文：

    $(function () {
    $('#ddlCountry').change(function () {
        //debugger;

        $.ajax({
            type: "post",
            url: "/States/Add",
            data: { id: $('#ddlCountry').val() },
            datatype: "json",
            traditional: true,
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#ddlState').append('<option value="' + value.StateId + '">' + value.StateName + '</option>');
                });
            }

        });
    });

我添加的内容似乎不起作用：

    $(function () {
    $('#ddlCountry').change(function () {
        //debugger;

        $.ajax({
            type: "post",
            url: "/States/Add",
            data: { id: $('#ddlCountry').val() },
            datatype: "json",
            traditional: true,
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#ddlState').searchableOptionList(data);
                });
            }

        });
    });

其他选项：

success: function (data) {
                $.each(data, function (index, value) {
                    $('#ddlState').searchableOptionList('<option value="' + value.StateId + '">' + value.StateName + '</option>');
                });
            }

---

success: function (data) {
                $(function (index, value) {
                    $('#ddlState').searchableOptionList(data, (index, value));
                });
            }

---

 success: function (data) {
                $(function () {
                    $('#ddlState').searchableOptionList({
                        data: (data)
                    });
                });
            }

更新：我很接近，这几乎可以工作。但是，我丢失了选择列表的格式，并在选择一个国家/地区时增益在状态中的格式。

 $('#ddlCountry').change(function () {
        //debugger;

        $.ajax({
            type: "post",
            url: "/States/Add",
            data: { id: $('#ddlCountry').val() },
            datatype: "json",
            traditional: true,
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#ddlState').append('<option value="' + value.StateId + '">' + value.StateName + '</option>');
                });
                $(function () {
                    $('#ddlState').searchableOptionList();
                });
            }
        });
    }); 

更新： 问题是关于 Searchable-Option 插件的文档很少。当前代码将无法正常工作，或者至少我无法使其正常工作。我必须使用 .change 并且插件需要 .searchableOptionList。如果可以重新配置代码，以便 .searchableOptionList 使用 success: 函数的部分作为数据，它将起作用。但这必须在 .change 函数之外，这样样式才能保留。我发布的代码的最后一部分更改了更改时的样式。我需要造型一直在那里。

感谢重新打开我的问题的人！

Answer 1

在阅读了选择选项插件后，我得出结论，级联选择下拉菜单中不需要它。该插件的目的是从下拉列表中多选选项。在这种情况下，你永远不需要它。

我已经实现了我想要的外观，因此它可以使用 CSS 与项目的其余部分一起流动。

代码如下： 不要使用选择选项中的任何功能。

<div class="form-group sol-container">
   @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label" })
   @Html.DropDownListFor(model => Model.Country, Model.Countries, "---Select Country---", new { @class = "form-control sol-inner-container ", @id = "ddlCountry" })
   @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
</div>

<div class="form-group sol-container">
   @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
   @Html.DropDownListFor(model => model.State, new List<SelectListItem>(), "---Select State---", new { @class = "form-control sol-inner-container ", @id = "ddlState" })
   @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>

<div class="form-group sol-container">
   @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
   @Html.DropDownListFor(model => model.City, new List<SelectListItem>(), "---Select City---", new { @class = "form-control sol-inner-container", @id = "ddlCity" })
   @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div> 

添加的 CSS 来自该插件附带的 sol.css。

希望这可以帮助其他人在他们经历我所做的这个漫长的过程之前。 这也是在 GitHub 网站上针对此插件提出的一个问题，但从未得到回答。