How to populate a dropdown base on another dropdown?

How to populate a dropdown base on another dropdown?

Hi,

I have 2 dropdowns in a page, the 1st dropdown drives the values of the 2nd dropdown. For example, if the user selects "Department" from the 1st dropdown it will pull from the tblDepartment table. Let's say, I have another one called Business Unit, if user selects this, I will pull from tblBusUnit table.

I found an example below:

http://www.webcodeexpert.com/2014/12/jquery-ajax-to-bind-aspnet-dropdownlist.html

 How can I pass the dropdown value using the jquery and how does the server side code's parameter looks?

jQuery:

Do I add the value of the other dropdown like the blue text below (where ddlType contains Department, Business Unit and etc.)

Also, how the code would look when the value of ddlType changes, so that it calls the server to repopulate the value?

contentType:  "application/json; charset=utf-8" ,
                 //url is the path of our web method (Page name/function name)
                url:  "Default.aspx/PopulateDropDownList(  $( '#ddlType ).val)"

Server side:

And in the server, do I add the parameter string strType like below, so that I know exactly what value has been picked?

[ WebMethod ]
         public   static   List < Department > PopulateDropDownList(string strType)

Please advice and your help would be greatly appreciated!