使用可搜索选项列表插件的C#Asp.net级联下拉选择列表 [英] C# Asp.net Cascading drop-down select lists using Searchable Options List plugin

问题描述

问题已解决，因此提出了一个新问题.您可以在这篇文章中阅读我们如何做到这一点. stackoverflow.com/questions/60379943

Started a new question as the problem has moved. You can read how we came to this in this post. stackoverflow.com/questions/60379943

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

I now have working code but for some reason the script formatting is interfering with the population of the drop-down select list. I can get the list to populate on the view by removing this code from the page.

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

所有这些操作是将下拉列表格式化为一种样式，而选择列表为单选按钮.由于某种原因，这使我的下拉菜单变得越来越重要.我认为这可能是首先加载什么"问题.这段代码在razor页面的顶部，而我的Javascript在底部.我真的不想失去下拉菜单的样式.这是所谓的"NiceDropdown"的一部分.

All this does is make the drop-down list formatted to a style and the select list is radio buttons. For some reason this is making my drop-down mot populate. I am thinking that it may be a "What gets loaded first" issue. This code is at the top of the razor page where my Javascript is at the bottom. I really do not want to lose the styling of the drop-down. This is a part of what is called "NiceDropdown".

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

Hopefully someone has some insight on this and can help remedy the issue.

上面链接的最后一个帖子中包含所有代码.我不想在另一个问题中重复代码.

The last post that is linked above has all the code in it. I didn't want to repeat code in another question.

感谢您的帮助！

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

UPDATE: While reading up on this plugin. In order to use it you have to format the call with "searchableOptionList". Need to find a way to incorporate an onchange and use the option above..

更新:这是我尝试从原始代码转换为代码的代码.

UPDATE: Here is the code i have tried from original to trying to convert.

原文:

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

        });
    });

我添加的内容似乎无效:

What i have added that doesn't seem to work:

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

更新:我很接近，这几乎可以正常工作.但是我失去选择列表的格式，并且在选择的国家获得在美国的格式..

UPDATE: I am close, This almost works. However i lose the formatting of the select lists and gain the formatting in the states when a country is selected..

 $('#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函数之外，以便样式保持不变.我发布的代码的最后一部分更改了更改样式.我需要样式一直存在.

UPDATE: The issue with this is there is very little documentation on the Searchable-Option Plugin. The current code will not work or at least i cannot get it to work. I have to use .change and the plugin requires .searchableOptionList. If the code can be reconfigured so that the .searchableOptionList uses the portion of the success: function as data it will work. But this has to be outside of the .change function so that the styling will remain. The last portion of my code that i posted changes the styling on change. I need the styling to be there the whole time.

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

Thanks to whomever re-opened my question!

推荐答案

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

After reading up on the select option plugin i have come to the conclusion that there is no need for that in a cascading select drop-down. The purpose of the plugin is to multi-select options from a drop-down. You would never need that in this case.

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

I have achieved the look i wanted so that it flows with the rest of the project with CSS.

这是代码:不要使用选择选项"中的任何功能.

Here is the code: Do not use any functions from the 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.

The CSS that was added comes from the sol.css that comes with this plugin.

希望这可以帮助其他人在我完成这个漫长的过程之前就走了.这也是在GitHub站点上针对此插件提出的一个问题，但从未得到解答.

Hope this helps others out before they go through this long process that i did. This was also a question that was asked on the GitHub site for this plugin and was never answered.

这篇关于使用可搜索选项列表插件的C#Asp.net级联下拉选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！