Showing values in second dropdown list corresponding to first dropdown list selected item

Form contains two dropdown lists created using code below. Both dropdown list elements have property Alusdok. If item in first dropdown is selected, second dropdown should show only those items whose Alusdok properties have same aluses as in first dropdown selected item Alusdok property.

Both list are small, contain 1-30 elements. Which is best UI for this? How to implement this, can some jQuery magic applied or other idea ?

<%= Html.DropDownList("_Report", Model.Reports, new { size = 10 })%>
<%= Html.DropDownList("_Paring", Model.Parings, new { size = 10 })%>


viewmodel:

    public class ReportViewModel : ViewModelBase
    {
public List<SelectListItem> Reports { get; set; }
public string _Report { get; set; }
public List&开发者_运维知识库lt;SelectListItem> Parings { get; set; }
public string _Paring { get; set; }

public ReportViewModel() {
...
            Reports = new List<SelectListItem>();
            foreach (ReportElem r in GetReportList())
                Reports.Add(new SelectListItem { Text = r.Nimetus, Value = r.Alusdok + r.Jrk.ToString() });

            Parings = new List<SelectListItem>();
            foreach (ParingElem p in GetParings())
                Parings.Add(new SelectListItem { Text= p.DisplayName, Value= p.Id.ToString() });
        }
    }


public class ReportElem {
  public string Nimetus,Alusdok;
  public int Jrk;
  }

public class ParingElem {
  public string DisplayName, Alusdok;
  public int Id;
  }

I'm using ASP.NET MVC2 , jQuery, jQueryUI

You could create an action that accepts a ReportElem.Alusdok value and returns a JSON list of ParingElem objects.

[HttpPost]
public ActionResult GetParingElems(string parentAlusdok)
{
    // construct a list formatted like this from your data layer, etc
    List<ListItem> list = new List<ListItem>() {
        new ListItem() { Value = "1", Text = "Alusdok 1" },
        new ListItem() { Value = "2", Text = "Alusdok 2" },
        new ListItem() { Value = "3", Text = "Alusdok 3" }
    };

    return Json(list);
}

Then, you could use jQuery to call this action and populate your second dropdown list. It looks like your dropdowns have id's: _Report and _Paring, so I assume that below.

$('#_Report').change(function() {
    $.ajax({
        url: 'GetParingElems',
        type: 'POST',
        data: { parentAlusdok: $('#_Report').val() },
        dataType: 'json',
        success: function(data) { // this is the returned JSON list
            $('#_Paring').remove();
            // iterate over data
            // i and optionData are arbitrary variable names
            $.each(data, function (i, optionData) {
                $('#_Paring').append(
                    $('<option></option>').val(optionData.Value).html(optionData.Text)
                );
            });
        }
    });
});

Keep in mind you might need to modify your routing (probably in global.asax) to accept requests of the form /ControllerName/GetParingElems/{parentAlusdok}. You may also need to tweak the url argument of the $.ajax call if your action resides in another controller, etc.