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

随着问题的转移，开始了一个新问题。你可以在这篇文章中看到我们是如何做到这一点的。

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

$function{ $'select'.searchableOptionList{ 最大高度：'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>');
                });
            }

        });
    });

其他选择：

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

更新：我很接近，这几乎奏效。但是，当选择国家/地区时，我会丢失选择列表的格式，并获得各州的格式

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

更新： 问题是关于可搜索选项插件的文档很少。当前代码将无法工作，或者至少我无法使其工作。我必须使用.change，插件需要.searchableOptionList。如果可以重新配置代码，使.searchableOptionList将success:函数的部分用作数据，则它将工作。但这必须在.change函数之外，这样样式才能保持不变。我发布的代码的最后一部分更改了样式。我需要造型一直在那里

---

感谢任何人重新打开我的问题

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

我已经实现了我想要的外观，因此它可以通过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网站上针对该插件提出的一个问题，但从未得到回答

请将所有相关代码放在一个位置，使我们尽可能方便地帮助您。这里的代码与您原始问题中的代码有何关联？原始问题中的所有代码都相关吗？是的，原始文档中的所有代码都是当前的代码。我试图找到一种方法来转换javascript以使用插件。我将发布我在上面尝试过的内容，但仍然不走运。。

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

<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>