Блог

Главная - Вопросы по программированию - Выпадающий список Mvc не работает

Выпадающий список Mvc не работает

#html #asp.net-mvc #drop-down-menu #html-select #dropdownlistfor

#HTML #asp.net-mvc #выпадающее меню #html-выберите #выпадающий список для

Вопрос:

Описание проблемы:

Выпадающий список после выделения не отображает выбранный текст из списка.

введите описание изображения здесь

Здесь я использую синтаксис MVC Razor для создания выпадающего списка.

   <div class="form-group">
            @Html.LabelFor(m => m.Genre)
            @Html.DropDownListFor(m => m.Genre, 
                                  new SelectList(Model.Genres, "Id", "Name"),
                                  "---Select---", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Genre)
    </div>

Список заполняется правильно, но после выбора опции он не отображается в выпадающем списке.

Примечание: когда я отправляю форму, правильное выбранное значение отправляется в действие.

Шаги проверены:

  1. Проверил сгенерированный HTML, он выглядит нормально..

введите описание изображения здесь

  1. В нем используется класс управления формой bootstrap, а цвет задан черным. Также отображаются остальные значения полей, которые находятся внутри той же формы.

  2. Вкладка, вычисляемая браузером введите описание изображения здесь

Заранее спасибо..

обновить решение:

Я определил некоторое переопределение для моего класса form-control для текстового интервала, который вызвал проблему. Я думал, что проблема с цветом, но на самом деле проблема была с моим заполнением текста.

 .form-control {
    font-size: 17px;
    /*padding: 20px 15px;*/  /*this statement caused issue*/
    border-radius: 9px; 
    height:42px; /* I replaced with padding to height which solved issue.*/
}

Комментарии:

1. Ваш html сгенерирован правильно и правильно отправлен обратно, поэтому это предполагает, что это проблема css

2. Я подумал, что это может быть проблема с Css. Не уверен, как найти переопределяющий css. Но я попытался добавить select#Genre.form-control.valid { цвет: черный!важно; }, это не сработало.

3. Используйте инструменты вашего браузера для проверки элемента и его стилей

4. Я также проверил вкладку вычисляемый. цвет установлен на черный.

5. Убедитесь, что нет другого элемента, который мог бы его маскировать. И есть ли у вас какой-нибудь javascript / jquery?

Ответ №1:

Я определил некоторое переопределение для моего класса form-control для текстового интервала, который вызвал проблему. Я думал, что проблема с цветом, но на самом деле проблема была с моим заполнением текста.

 .form-control {
    font-size: 17px;
    /*padding: 20px 15px;*/  /*this statement caused issue*/
    border-radius: 9px; 
    height:42px; /* I replaced with padding to height which solved issue.*/
}

Ответ №2:

Извините, я опаздываю. Но выпадающий список работает так же хорошо, только если вы измените конфигурацию на версию PC в инструментах вашего планшета