Блог

Нужна помощь в создании выпадающего списка Jquery cascadia

Я очень новичок в jquery и не уверен, как это сделать. Я сделал краткий пример проекта, чтобы опробовать его, но ничего не нашел на стороне jquery.

вот моя модель.

 public class Life
{
    public static List<Life> MyList = new List<Life>
    {
        new Life {first="Animal",second="Mammal",third ="human"},
        new Life {first="Plant",second="Tree",third ="cherry"},
        new Life {first="Plant",second="Grass",third ="rye"},
        new Life {first="Plant",second="Tree",third ="oak"}
    };

    public string first {get; set;}
    public string second {get; set;}
    public string third {get; set;}
}
  

Я хочу создать представление, в котором есть 3 выпадающих списка. Первый заполняется первой строкой, а затем вторая строка переходит во второй выпадающий список и т.д. Итак, в первом выпадающем списке будут Animal и plant.
И если вы выберете Plant, вы не увидите Mammal во втором выпадающем списке.

Есть какие-нибудь хорошие примеры? Или как бы я преобразовал этот образец модели в представление, которое делает это?

Самый классный способ создать такой выпадающий список — это использовать html helper. Я создал его для средства выбора языков (мой очень простой, и данные должны поступать из базы данных и т.д., Но у меня не было времени). Это даст вам представление о том, как сложно:

Выпадающий помощник:

  public static class HtmlHelpers
    {
       public static MvcHtmlString LanguageDropDownListFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
        {
            var dutch = new SelectListItem() { Selected = true, Text = "nl-be", Value = "nl-be" };
            var french = new SelectListItem() { Selected = false, Text = "fr-be", Value = "fr-be" };
            var list = new List<SelectListItem> { dutch, french };
            return html.DropDownListFor(expression, list);
        }
}
  

Тогда у меня есть модель (для вас важно только языковое поле!):

 public class Answer

{
    [Key]
    public Guid Id { get; set; }

    public Guid QuestionId { get; set; }
    public virtual Question Question { get; set; }

    public string Text { get; set; }

    [MaxLength(5)]
    public string Language { get; set; }
    public int Order { get; set; }

    public virtual ICollection<UserAnswer> UserAnswers { get; set; }
}
  

и затем, на ваш взгляд, используйте:

 @Html.LanguageDropDownListFor(model => model.Language)
    @Html.ValidationMessageFor(model => model.Language)
  

Если вам нужна дополнительная помощь, дайте мне знать 🙂