You can use the jquery for this in MVC. Like as follows.
Add two drop-downs and add id html attributes to them. Add click event to each drop down option of animal type drop-down using jquery.
$('#animalDD').find('option').on('click', function () {
$.get('@Url.Action("GetDropDownListPerSelctedItem","Home")', function(data) {
$('#subType').html(data);
});
});
The $.Get will call action method and will pass that select item value as string. Then in action method you can build List<selecteditemlist> as per the passed value.
After that call one partial view, which gives you only view result for this items as follows.
@if(list!=null && list.Length>0)
{
foreach (var selectListItem in list)
{
@selectListItem.Text
}
}
As you checked, in jquery clicked event we are calling service method which gives us html 'option' result. This result then will bind to your second drop down.
So after clicked any items in one drop down, we are showing /binding respected values in other drop down.
--SDK