c# - Redraw dependent select list on client side -

i have 2 dimentional array model view:

public class mydata {     pubic ilist<source> sources     { get; set; }      .... }  public class source  {     public string parentname     { get; set; }      public ilist<string> childnames     { get; set; } } 

it 5 parents , each of them has 10 childs. on page need show 2 lists: first contain parents , second contain selected parent childs.

<select id="parents">  @foreach (var source in model.sources)  {      <option>@source</option>  } </select>  <select id="childs">  </select> 

sources have formed @ once on server side , never modifed. best practice show these lists? redraw child list on client side? how model view javascript(jquery)? somthing c# code:

model.sources.firstordefault(s => s.parentname == selectedvalue) 

into change event handler:

$("#parents").change(function () {            var selectedvalue = $("#parents").val();            ??? }); 

i'd appreciate answer!

you this:

<select id="parents"> @foreach (var source in model.sources) {      <option>@source</option> } </select>  @foreach (var source in model.sources) {     <select id="@source.parentname_children" class="childselect">         @foreach (var child in source.childnames)         {             <option>@child</option>         }     </select> } 

this render 1 select list parents , 1 select each parent's children (with unique id). in jquery can this:

$("#parents").change(function () {      var selectedvalue = $("#parents").val();      // hide selects children       $(".childselect").hide();         // show 1 belongs parent      $("#" + selectedvalue + "_children").show();  }); 

to make sure not child selects visible when page loads can add css rule:

.childselect{     display: none; }