javascript - I want to update values in drop down box without page refreshing in ASP.Net -

javascript - I want to update values in drop down box without page refreshing in ASP.Net -

i want asp .net code example-

as have 4 drop downwards box, when select value in first box in sec box filtered value according first box should without page refresh please help me.

example-

i giving illustration of country, state, city. when select country in sec box states should updated according country when select state city name should updated in 3rd box.

this process should without refreshing page.

if using webforms,you can utilize updatepanel in webforms , giving drop downlist in update panels.. please find sample code

list<districts> list = new list<districts>(); districts item = new districts(); protected void page_load(object sender, eventargs e) { if (drd1.selecteditem.value == "kerala") { item.sname = "ekm"; item.id = 1; list.add(item); districts item1 = new districts(); item1.sname = "thr"; item1.id = 2; list.add(item1); } else { item.sname = "coimbatore"; item.id = 1; list.add(item); districts item1 = new districts(); item1.sname = "chennai"; item1.id = 2; list.add(item1); } } public class districts { public string sname { get; set; } public int id { get; set; } } protected void drd1_selectedindexchanged(object sender, eventargs e) { drd2.datasource = list; drd2.datatextfield = "sname"; drd2.datavaluefield = "id"; drd2.databind(); }

and page looks this

<asp:scriptmanager id="scr" runat="server"></asp:scriptmanager> <asp:updatepanel id="upd" runat="server" > <contenttemplate> <asp:dropdownlist id="drd1" runat="server" autopostback="true" onselectedindexchanged="drd1_selectedindexchanged"> <asp:listitem text="kerala" value="kerala"> </asp:listitem> <asp:listitem text="tn" value="tn"></asp:listitem> </asp:dropdownlist> <asp:dropdownlist id="drd2" runat="server" width="100"></asp:dropdownlist> </contenttemplate> </asp:updatepanel>

javascript jquery asp.net asp.net-ajax