IT-Stuffs

When the Items of dropdown box is selected then we need to get the item and display it into lable and also based on the one drop down we need to load the other. Normaly we will write this in server side code, but this can be done with client side iteslef using Jquery.
For that First we need to add the two dropdown list controls first in our aspx page

<div align="center">
        <div id="message" class="Highlight" style="width: 300px;" align="center">
        </div>
    </div>
  <table> <tr>
                <td>
                    <asp:Label ID="lblEduLevel" runat="server" Text="Select Education Level:"></asp:Label>
                </td>
                <td>
                    <asp:DropDownList ID="ddlEduLevel" runat="server" Style="border-width:thin; border-color: #7F9DF9">
                        <asp:ListItem Text="SSLC" Value="0"></asp:ListItem>
                        <asp:ListItem Text="HSC" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Graduate" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Post Graduate" Value="3"></asp:ListItem>
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="ddlMajor" runat="server" Style="border-width:thin; border-color: #7F9DF9">
                    <asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr></table>

The bellow Jquery is used to bind the 'Key Change' Events to the dropdown box using the 'Bind' Method. The bind method of control is used bind the event before the DOM is loading.

// Working with Dropdownlist
        $(document).ready(function () {
            $('#<%=ddlEduLevel.ClientID %>').bind('keyup change', function () {
                if ($(this).val() != "") {
                    // this used to display the user message to Div element 
                    $('#message').css("color", "blue");                  
                    $('#message').text("Qulification: " + $(this).find(":selected").text() + " And the Edu Level: " + $(this).val()); 
                }
            });
        });

Here $('#<%=ddlEduLevel.ClientID %>') is dropdown list client Id and $('#message') is the 'Div' elements to dispaly the message. The .Css() is used to apply the Css Style to the control and the .text() method of jquery is used to assign the text to the div elements. Here $(this) is used jquery dorpdown list 'ddlEduLevel' and the .find() method with (":selected").text() is used to get the text of the selected Item, $(this).val() is used to display the value of the selected Item.
The following Jquery is used to loading the another dropdown control based on the current dropdown's selected Item.

$(document).ready(function () {
            $('#<%=ddlEduLevel.ClientID %>').bind('keyup change', function () {
                $("Select[id$=ddlMajor] > option").remove();
                if ($(this).val() == "3") {
                    $('#<%=ddlMajor.ClientID %>').append("<option value='1'>Computer Application</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='2'>Computer Science</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='3'>Maths</option>");
                }
                else if ($(this).val() == "0") {
                    $('#<%=ddlMajor.ClientID %>').append("<option value='1'>General English</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='2'>General Tamil</option>");
                }
                else if ($(this).val() == "1") {
                    $('#<%=ddlMajor.ClientID %>').append("<option value='1'>English</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='2'>Tamil</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='3'>Computer</option>");
                }
                else if ($(this).val() == "2") {
                    $('#<%=ddlMajor.ClientID %>').append("<option value='1'>English</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='2'>Tamil</option>");
                    $('#<%=ddlMajor.ClientID %>').append("<option value='3'>Computer</option>");
                }
            });
        });

The above we have used two dropdowns called ddlEduLevel,ddlMajor and we can load the ddlMajor based on the item selected from ddlEduLevel. $("Select[id$=ddlMajor] > option").remove(); is used to remove the all items from the list and the append() method of the dropdown list is used to add the new element into the dropdown list.