Скрытие полей в зависимости от выбора пользователя?

Question

Можно ли скрыть опции в поле выбора в зависимости от ответа пользователя? С Javascript / jQuery.

У меня довольно сложная и длинная форма, и я хочу попытаться, по возможности, избегать загрузки элементов HTML, поскольку условная логика только запутает.

Таким образом, пользователь будет следовать чему-то похожему на это: 1. Шаг первый: выберите цвет (красный, синий, зеленый, оранжевый). 2. Шаг второй: выберите номер (1, 2, 3, 4, 5, 6). Различные числа отображаются в зависимости от цвета, выбранного в первом поле. 3. Шаг третий: кнопка отображается со ссылкой вне сайта, ссылка будет зависеть от первого шага, а затем второго шага.

Примером выбора может быть: 1. Выбранный красный (красный, синий, зеленый,оранжевый), 2. Выбран 1 (только показать 1, 2, 3) из-за красного выделения. 3. Ссылка на продукт Red 1.

Это довольно сложно объяснить, поэтому я очень надеюсь, что это имеет смысл.

Выше приведен только небольшой фрагмент формы в качестве примера.

Ниже приведен пример моего HTML-кода:

<select name="color" class="colour">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="orange">Orange</option>
</select>

<select name="numbers" class="numbers">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Я знаю, что могу использовать код, подобный этому, но потом мне придется создавать множество различных элементов select, так какЕсть много разных вариантов в зависимости от выбора в каждом поле.

$('.colour').on('change',function(){
if ( $(this).val()=== "red") {
  $(".numbers").show();
}
else {
  $(".numbers").hide();
}

Answer 1

function loadBtn(){
   let colour = $(".colour").val();
   let numbers = $(".numbers").val();
   $('.btn').html(colour+" - "+numbers);
   $('.btn').attr("href", "http://yourURL.com/?colour="+colour+"&numbers"+numbers);
}

function loadNumbers(elem){
  let value = $(elem).val();
  let range = $(elem).find("option:selected").attr("numberRange");
  let newRanges = range.split(",").map(num => `<option value="${num}">${num}</option>`).join("");
  $('.numbers').html(newRanges);
}

loadNumbers($(".colour"));
loadBtn();

$('.colour').on('change',function(){
  loadNumbers(this);
  loadBtn();
});

$('.numbers').on('change',function(){
  loadBtn();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<select name="color" class="colour">
  <option value="red" numberRange="1,2,3">Red</option>
  <option value="blue" numberRange="1,2">Blue</option>
  <option value="green" numberRange="1,2,3,4">Green</option>
  <option value="orange" numberRange="1,2,3,4,5,6">Orange</option>
</select>

<select name="numbers" class="numbers">
</select> 
<a class="btn" href=""></a>