C# Asp. net Каскадные выпадающие списки выбора с помощью плагина Список параметров с возможностью поиска - PullRequest
0 голосов
/ 25 февраля 2020

Начался новый вопрос по мере перемещения проблемы. Вы можете прочитать, как мы пришли к этому в этом посте. 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: function в качестве данных, которые он будет работать. Но это должно быть за пределами функции .change, чтобы стиль оставался прежним. Последняя часть моего кода, которую я опубликовал, меняет стиль при изменении. Мне нужно, чтобы стиль был там все время.

Спасибо, кто бы ни открыл мой вопрос!

1 Ответ

0 голосов
/ 26 февраля 2020

После прочтения плагина выбора опций я пришел к выводу, что в раскрывающемся списке каскадного выбора нет необходимости. Целью плагина является многократный выбор параметров из выпадающего списка. Вам никогда не понадобится это в этом случае.

Я добился того, что хотел, чтобы он соответствовал остальной части проекта с 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, который поставляется с этим плагином .

Надеюсь, это поможет другим, прежде чем они go пройдут этот долгий процесс, который я проделал. Это был также вопрос, который был задан на сайте GitHub для этого плагина и не получил ответа.

...