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 站點上針對此插件提出的一個問題，但從未得到回答。