Different values in dropdownlist depends on what i select in another dropdownlist

Question

What I want to make and Create: I want to make 2 dropdownlist in asp.net. Lets say the first contains countries, and the second contains the cities in the countries.

Lets say I select England in the first Dropdownlist and then only the Cities that belongs to England will be visible or selectable in the second dropdownlist.

<asp:DropDownList ID="Countries" runat="server">  // First dropdownlist
    <asp:ListItem>England</asp:ListItem>
    <asp:ListItem>Denmark</asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="Citys" runat="server">    // Second dropdownlist
</asp:DropDownList>

I hope I explained it good enough and I hope that someone can provide me with either some code that can do it or a hint about it.

Answer 1

If you use SqlDataSource, you can cascade the selected value to CitySqlDataSource.

Here the demo -

Database

   Countries                                Cities
Id       Name                    Id      CountryId      Name
1        England                 1            1         London
2        Denmark                 2            2         Copenhagen    

ASPX

<asp:DropDownList ID="CountryDropDownList" runat="server"
    DataSourceID="CountrySqlDataSource" 
   DataTextField="Name" DataValueField="Id" AutoPostBack="True">
</asp:DropDownList>
<asp:SqlDataSource ID="CountrySqlDataSource" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT Id,Name FROM [Countries]"></asp:SqlDataSource>

<asp:DropDownList ID="CityDropDownList" runat="server"
    DataSourceID="CitySqlDataSource" 
    DataTextField="Name" DataValueField="Id">
</asp:DropDownList>
<asp:SqlDataSource ID="CitySqlDataSource" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT Id,Name FROM Cities WHERE CountryId=@CountryId">
    <SelectParameters>
        <asp:ControlParameter ControlID="CountryDropDownList" 
            PropertyName="SelectedValue"
            Name="CountryId " Type="String" 
            DefaultValue="England" />
    </SelectParameters>
</asp:SqlDataSource>

Here is the similar answer.

Answer 2

It is called cascading drop down lists and I recommend looking at the ASP.NET AJAX Control Toolkit CascadingDropDownList control.

Read Using CascadingDropDown with a Database for a tutorial.

Essentially you are going to create multiple (two in your case) regular ASP.NET drop down list server controls, along with a cascading drop down list server control for each level of cascade that you want. This is what marries the two drop down lists together.

All of the data fetching is done via ASP.NET AJAX Page Methods, which are essentially page-hosted web service methods that do not have a reference to the page itself, because they are static and are great for asking the server for data via script (i.e. client-side) and returning it.

Note: By default, ASP.NET AJAX Page Methods encode the data to JSON, so you will not see any encoding logic unless you want to return something besides JSON (i.e. XML).

Answer 3

You can do this with your regular drop down lists and make them cascade by using the handlers in the code-behind:

(Caveat - own blog post):

Code Snippet: Cascading DropDownLists