dropdown value changed on another dropdown selection in asp.net

Question

I have a dropdownList called Institution and another two dropdownLists are Position and Department. And I want to change dropdown value of Position and department based on the selected value of Institution DropDownList.

Ex: If I select Not Available on Position then It should reflect on other two drop down Position and Department like Automatically Not available will be select for Position and Department.

Note : In my existing project I am using asp.net. I am confused that how to do this. Whether I should do it thru backend or handle in frontend.

It would be nice If I can have help with an code example as well.

Answer 1

First up, you don't mention if you want each successive combo to cascade from the previous.

So, you either cascade both departments and position based on one institution selection like this:

Or you select Institution, and then departments, and that gives you positions.

eg this:

But, the code don't matter.

For easy? Lets just assume the first case. (the code is much the same for either case.

We assume: drop 3 dropdown boxes. Auto post back = true for all 3

For each combo box, we set the Data Value Field to "ID" And DataText field (the text description column to Institution, Department or Position for the 3 combo boxes.

Ok, so far, all drag and drop.

Now, the code:

On page load, we load up the first combo with this:

If IsPostBack = False Then
    Me.Instutions.DataSource = Myrst("select ID,Instution from Instutions")
    Me.Instutions.DataBind()
    Me.Instutions.Items.Insert(0, New ListItem(String.Empty, String.Empty))
    Me.Departments.DataSource = Nothing
    Me.Positions.DataSource = Nothing
End If

And in the index changed event for the Institutions combo?

As noted, I'll just place/assume a cascade as per my first data base diagram.

You have this:

Protected Sub Instutions_SelectedIndexChanged(sender As Object, e As EventArgs) Handles Instutions.SelectedIndexChanged

    Dim strSQL As String = "SELECT ID,Position from Positions WHERE Instutions_ID = " & Instutions.SelectedValue

    Me.Positions.DataSource = Myrst(strSQL)
    Me.Positions.DataBind()
    Me.Positions.Items.Insert(0, New ListItem(String.Empty, String.Empty))

    strSQL = "SELECT ID,Department from Departments WHERE Instutions_ID = " & Instutions.SelectedValue
    Me.Departments.DataSource = Myrst(strSQL)
    Me.Departments.DataBind()
    Me.Departments.Items.Insert(0, New ListItem(String.Empty, String.Empty))

End Sub

I also use the Items.Insert to add a blank row, since if you don't, then when you fill/bind the combo box, it will select the first row - you might not want this (but, hey maybe you do - if so remove the .Items.Insert to not add that blank line.

As noted, if you cascading for all 3?

Then simply move out the last code in above that sets Positions for each department.

The total amount of code is really about the same.

Also, as a general rule, it is a pain to re-write the code over and over to pull data into a table. So, above also used a helper routine called MyRst. It just saves your fingers, and actually is a handy routine you can use to fill grids, listviews, and in our case drop downs with a min of code. So that routine I used is this:

Public Function Myrst(strSQL As String) As DataTable

    Dim mycon As New SqlConnection(My.Settings.Test4)
    Dim oReader As New SqlDataAdapter
    Dim rstData As New DataTable

    oReader.SelectCommand = New SqlCommand(strSQL, mycon)
    Try
        oReader.Fill(rstData)
        Return rstData
    Catch
        Debug.Print(Err.Description)
        Return Nothing
    End Try

End Function

So, it not a lot of code. And as noted, the above helper routine has a ton of uses for your application.

So, the end result is say this:

You don't need any client side code. However, you DO have to set auto post back for each combo = true for the 3 (well, ok, maybe just the first 2). If a full page post back is not wanted? Then just drop the above 3 controls into a update panel and that issue is gone (you only have a partial page post back).

So, VERY little code if done right.