Need help creating Jquery cascadia dropdown

Need help creating Jquery cascadia dropdown

I am very new to jquery and not sure how to do this. I made a quick sample project to try it out but haven't got anywhere on the jquery side.

here is my model.

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;}
}

I want to create a view that has a 3 drop downs. The first one is populated with the first row, and then the second row goes in the second drop down etc. So first drop down would have Animal and plant. And if you select Plant you would n开发者_Go百科ot see Mammal in the second drop down.

Any good examples out there? Or how would I work this sample model into a view that does this?

The coolest way to create such a dropdown, is with an html helper. I created one for languages picker (mine is very basic and data should be coming from db etc, but I didn't have time). This will give you an idea tough:

Dropdown 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);
        }
}

Then I have a model (only the language field is important for you !):

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; }
}

and then in your view use:

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

If you need any more help, let me know :)