Ever wanted to change the value of  a dropdown based on what was selected in the parent dropdown? It can be easily achieved with javascript. First add the following code to your element.

onchange="Cascade(this.options[this.selectedIndex].value);"

I'm using .NET server side contols so my html code looks like below: 

<asp:DropDownList ID="ddl_names" runat="server" onchange="Cascade(this.options[this.selectedIndex].value);">
               <asp:ListItem></asp:ListItem>
              <asp:ListItem Value="John">John</asp:ListItem>
              <asp:ListItem Value="Emma">Emma</asp:ListItem>         
</asp:DropDownList>

<br><br>

 <asp:DropDownList ID="ddl_sex" runat="server" >
     <asp:ListItem></asp:ListItem>
    <asp:ListItem>Male</asp:ListItem>
       <asp:ListItem>Female</asp:ListItem>
</asp:DropDownList>

Then you add the following javascript in the head section of your page:

<script type="text/javascript">
        function Cascade(dropdownitem) {
            var control = document.getElementById("<%=ddl_sex.ClientID %>")
            if (dropdownitem == "John") {

                control.value = "Male";
            }
            else {
                control.value = "Female";
            }

        }
    </script>

 That was it! Pretty simple right!?