.Net MVC DropDownList не отображается правильно, когда он изначально скрыт

Question

Я довольно новичок в этом стиле .Net MVC, так что, надеюсь, это что-то простое исправить.

У меня есть строка таблицы HTML, которую нужно скрыть при загрузке страницы, а затем, еслиопция из выпадающего списка (DDL) выбрана, она отображается.Эта скрытая строка включает в себя еще один MVC DDL.

Если я не скрываю строку изначально, DDL правильно отрисовывается. Однако, если я использую CSS / стили, чтобы скрыть строку, или использовать JQuery, чтобы скрыть строку послепри загрузке страницы DDL отображается как полностью пустой список без стандартных действий.

<tr id="ifNotChosen">
    <td>Why not chosen?</td>
    <td>
        @Html.DropDownListFor(x => x.NotChosenReason, Model.NotChosenReasons,
            new { @class = "chosen-select-deselect", data_placeholder = "Select Not Chosen Reason", style = "width:200px;" })
    </td>
</tr>

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

<script>
    ...

    $("#ifNotChosen").hide();

    ...
</script>

Как я уже сказал, если строка изначально не скрыта, она отображается правильно, со всеми доступными параметрами и видимым data_placeholder.На рисунке ниже показан DDL, который определяет, является ли второй DDL видимым или нет.Это показывает результаты первоначального скрытия строки, а затем делает ее видимой после выбора правильной опции в первом DDL.Ни один из вариантов не может быть выбран, так как он также больше не действует как обычный DDL.

К вашему сведению, все исследования, которые я проводилсделанное до сих пор только говорит мне, как скрыть или показать DDL, но не решает эту странную проблему.

Итак, мой вопрос: как мне заставить этот список DDL работать правильно?

Редактировать:
Это новое поле в рабочей форме.JQuery включается в верхней части страницы, а другой JQuery на странице работает просто отлично.

Edit 2:
После проверки ответа @Vicky Khichar, вариантызаполнено правильно.

Кроме того, во время тестирования прошлой ночью я обнаружил, что использование $(document).ready не имеет никакого значения.

Похоже, это на 100% проблема DOM.

Answer 1

@section scripts {
<script>
    //For hide html table on page load
    $(document).ready(function(){
        $('#ifNotChosen').hide();

    //here you can bind the value in dropdown list.

    });


    //For Show table on dropdown change
    $("#dropdownId").change(function(){
        $('#ifNotChosen').show();
    }); 
</script>
}

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

Answer 2

Я подозреваю, что вы загружаете jQuery после этого скрипта в полученный HTML. Как правило, в бритвенных представлениях вы помещаете свои скрипты в специальный именованный раздел, который получает рендеринг с помощью _Layout после загрузки jQuery.

Итак, на вашей странице:

@section scripts {
 <script>...</script>
}

и в вашем _Layout.cshtml где-то в нижней части:

<script src="~/lib/jquery/dist/jquery.js"></script>
@RenderSection("scripts", required: false)

Таким образом, ваши скрипты на вашей странице исполняются после jQuery загружается

Answer 3

Проведя дополнительное тестирование, я обнаружил, что, хотя JQuery отображает строку и все остальное, он также устанавливает:

style="width:0"

После нескольких часов попыток выяснить, что происходит, я наконец-то понял, что все, чего мне не хватало, - это простая команда, которая, как я думал, JQuery не потребовала бы.

$("#dropdownId").css("width", "200px");

Как только он имеет допустимую ширину, он работает как задумано. Почему это должно быть ручным делом, ИДК. Это похоже на взлом. Мне это не нравится, но это работает, так что это то, что я использую.

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

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

@Html.DropDownListFor(x => x.NotChosenReason, Model.NotChosenReasons,
    new { @class = "chosen-select-deselect", data_placeholder = "Select Not Chosen Reason", style = "width:200px;" })