Show options of selected options inside the same

Show options of selected options inside the same

There is an unordered list of 3 items, say A,B and C inside a <div>. Now
if I select an option A, it should again show a list of P, Q and R inside
the same <div> and if I select B, it should show an unordered list of X,Y
and Z plus it should have a back button as well.
<div>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div>
Now upon selecting Option A, the following list should be displayed inside
the same <div>
<select>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
</select>
And like this, it is upto 3-4 levels down, for eg:- From A->P,Q,R. From
P->D,E,F. From D->S,R,T and similarly. All should be displayed inside the
same <div> tag.
I have searched bootstrap but didnt got the expected result. Can this be
done in bootstrap. If not, how can I approach this problem in jQuery?