Select opens another select (loop) - html

Question

I am kinda new to programming so I have no idea how to fix my issue.
So I have a select id="one", and what I want is that when the user selects an option it shows a select id="two" and when the user selects an option it shows a select id="three" and so on...
I tried with 'display=none' but I don't really like that way because anyone can make the select show up without selecting an option. Is there any possible way of doing that?
Here is my first select:
<select class="form-control" id="one" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
And when the user picks an option this select must show up:
<select class="form-control" id="two" required>
<option value="c">c</option>
<option value="d">d</option>
</select>
Thank you for your time and I hope you can help me!

Answer 1

I think the issue is related to on select event not binding to dynamically created second select(id="two"). So try adding event listener via Jquery when you create new select box.
$("#one").on('change', function () {
// Add second select box with id="two" here
$('<select id="two"><option></option></select><br/>').appendTo('body');
//After adding select add the event listener
$("#two").on("change", function(){
// Write what you want to do here
});
});

Answer 2

How about this? It's very rough and only works on the basis of showing the next select in DOM order. You could add a data attribute to the select to determine which select to show when the value was changed.
$('select').change(function(){
if ($(this).val()) {
$(this).next('select').show();
}
});
$('select:first').show();
select {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">- please select -</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select>
<option value="">- please select -</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<select>
<option value="">- please select -</option>
<option value="e">e</option>
<option value="f">f</option>
</select>
If you're worried about someone showing the second select and without submitting something for the first then you can always run a check client side to see if both selects have a value or check server side.