C# Asp.net Cascading 下拉选择列表使用 Searchable Options List 插件

Question

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

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

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

所有这一切都是使下拉列表格式化为样式，选择列表是单选按钮。 出于某种原因，这使我的下拉菜单填充。 我认为这可能是“先加载什么”问题。 这段代码位于 razor 页面的顶部，我的 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 使用成功的部分：函数作为数据，它将起作用。 但这必须在 .change 函数之外，以便保持样式。 我发布的代码的最后一部分更改了更改时的样式。 我需要造型一直在那里。

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

Answer 1

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

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

这是代码： 不要使用 Select Option 中的任何功能。

<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 站点上针对此插件提出的一个问题，但从未得到回答。