javascript - Change DropDownListFor content based on other DropDownListFor content using ajax -

i use advice in order create new list based on selected input in first dropdownlist.

what i'm trying when user selects in dropdownlist, should reload somehow (not whole page) , generate new list shown in 2nd dropdownlist.

to explain better, have created 2 dropdownlistfor --> departure route , return route. data have shown under here:

departure dropdown:

<p>     @html.label("departure route:")     @html.dropdownlistfor(m => m.departureroute, model.routeslist, new { @class = "dropdownlist", @id = "departureroute" }) </p> 

the model.routeslist comes following method:

public list<selectlistitem> routes()     {         var routes = new list<selectlistitem>         {             new selectlistitem {value = "osco", text = "oslo - copenhagen"},             new selectlistitem {value = "coos", text = "copenhagen - oslo"},             new selectlistitem {value = "cost", text = "copenhagen - stockholm"},             new selectlistitem {value = "stco", text = "stockholm - copenhagen"},             new selectlistitem {value = "osst", text = "oslo - stockholm"},             new selectlistitem {value = "stos", text = "stockholm - oslo"},         };         return routes;     } 

return dropdown:

i'm not sure if should have method because want create new list , show routes valid.

<p>     @html.label("return route:")     @html.dropdownlistfor(m => m.returnroute, model.routeslistconversely, new { @class = "dropdownlist", @id = "returnroute" }) </p> 

the model.routeslistconversely comes data:

public list<selectlistitem> routesconversely()     {         var routesconversely = new list<selectlistitem>         {             new selectlistitem {value = "coos", text = "copenhagen - oslo"},             new selectlistitem {value = "osco", text = "oslo - copenhagen"},             new selectlistitem {value = "stco", text = "stockholm - copenhagen"},             new selectlistitem {value = "cost", text = "copenhagen - stockholm"},             new selectlistitem {value = "stos", text = "stockholm - oslo"},             new selectlistitem {value = "osst", text = "oslo - stockholm"},         };         return routesconversely;     } 

as see, have set values "coos" stands copenhagen oslo. when user selects, lets stockholm - copenhagen in departure route dropdownlist, has value = "stco".

i want create new list each time user selects new route in departure route dropdownlist. if departure route stockholm - copenhagen "stco" return route dropdownlist should contain fields "copenhagen - stockholm "cost" , copenhagen - oslo "coos" , not all.

i'm not sure right way is, have read ajax should at. suggestions on how can this?