Change options in <select> box based on what is chosen in another <select> box

Change options in <select> box based on what is chosen in another <select> box

Hi, I'm doing a ecommerce website, and I want to make it easier for my customers to fill in their shipping address by allowing them to select the city and district they are in from a selection box .

Assuming my site has 3 options: city A, B, and C. 
  1. City A has 3 districts: Alpha 1, Alpha 2, and Alpha 3.
  2. City B has 2 districts: Bravo 1 and Bravo 2.
  3. City C has 5 districts: Charlie 1, Charlie 2, Charlie 3, Charlie 4, and Charlie 5.
Is there a way to make it so that if a customer pick City A, he/she can only pick the Alpha districts; and if he/she pick either B or C, he/she can only choose the corresponding districts?