how to do dynamically select option

I have two select option 1.State and 2. City i have 2 state A,B and A(state) have 2 city a,b and B have city x,y ,now want to that when A is then show only A's city as well as for B state

<select class="form-control">
                      <option>A</option>
                      <option>B</option>
</select>  
<select class="form-control">
                      <option>a</option>
                      <option>b</option>
</select>