根据从下拉菜单 1 中选择的选项显示/隐藏下拉菜单 2 或下拉菜单 3

Question

I have 3 dropdowns in a form:

<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>

<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>

<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>

I need the second and third dropdown to appear/disappear based on selection of the first dropdown. 2 and 3 have to be hidden on page load, or when value 3 is selected on dropdown 1, but not just hidden from view, rather completely non-existant. I say this because jquery.show and.hide only makes an element disappear from display, it still stays inside the code and because of the "required" attribute inside those hidden dropdowns, form cannot submit.

I have tried this as well as many other answers I found, but had no luck...

<script>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').show();
$('#3').hide();
} else if ($(this).val() == '2') {
$('#3').show();
$('#2').hide();
} else {
$("#2").hide();
$('#3').hide();
}
})
</script>

Please help...

Edit: Something along those lines:

<form id="form">
  <select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<div id="here">
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>

<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
  </div>
</form>


$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').appendTo( "#here" );
 $('#3').remove();
} else if ($(this).val() == '2') {
$('#3').appendTo( "#here" );
 $('#2').remove();
} else {
  $('#2').remove();
  $('#3').remove();
}
})

I am not very good at jquery. This does what I want, but only once. I dont know how to bring them back once removed. For example, if I selected from #1: 1(Car) and from #2: 1(Small Car), #3 will be removed. But if i now decide to choose another option on #1 nothing happens. Also, on load, all 3 are shown, I wanted to keep #2 and #3 hidden until an option on #1 is selected.

Answer 1

Here's one way to go about it. Instead of using numbers as ID's, why not use a data-attribute . Each time a select option is chosen the code will show the next one in the sequence.

 $(document).ready(() => { $('select[data-order=1]').show() let selects = $('select[data-order]'); selects.change(function() { // get number let num = +$(this).data('order'); // show the next select and hide all selects after that selects.each(function(i,o) { let thisNum = +$(o).data('order'); if (thisNum === num + 1) $(o).show().val(''); // show and reset the value else if (thisNum > num + 1) $(o).hide(); }) }) })

 select[data-order] { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <select data-order='1' id="1" required> <option value="">Select type</option> <option value="1">Car</option> <option value="2">Truck</option> <option value="3">Some other option</option> </select> <select data-order='2' id="2"> <option value="">Select option</option> <option value="1">Small Car</option> <option value="2">Big Car</option> </select> <select data-order='3' id="3"> <option value="">Select option</option> <option value="1">Small Truck</option> <option value="2">Big Car</option> </select> </form>