根据下拉列表 1 中选定的选项显示/隐藏下拉列表 2 或下拉列表 3

Question

我的表单中有 3 个下拉菜单：

<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>

我需要根据第一个下拉菜单的选择来显示/消失第二个和第三个下拉菜单。 2 和 3 必须在页面加载时隐藏，或者在下拉列表 1 中选择值 3 时隐藏，但不仅仅是从视图中隐藏，而是完全不存在。我这样说是因为 jquery .show 和 .hide 只会使元素从显示中消失，它仍然保留在代码中，并且由于这些隐藏下拉列表中的“required”属性，表单无法提交。

我已经尝试过这个以及我找到的许多其他答案，但没有运气...

<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>

请帮助...

编辑： 类似的事情是：

<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();
}
})

我不太擅长jquery。这就是我想要的，但只有一次。我不知道一旦移除后如何将它们带回来。例如，如果我从#1：1（汽车）和#2：1（小型车）中选择，则#3 将被删除。但如果我现在决定在#1 上选择另一个选项，什么也不会发生。另外，加载时，所有 3 个都会显示，我想保持 #2 和 #3 隐藏，直到选择 #1 上的选项。

Answer 1

这是一种解决方法。为什么不使用数据属性，而不是使用数字作为 ID。每次选择一个选项时，代码都会显示序列中的下一个选项。

$(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>