Select выбор option, открыть нужный select?

Question

Есть основной select с перечнем марок автомобилей и при выборе одной из марок авто, появляется под каждую марку разный select с возможностью выбора модели авто, как реализовать на jquery?

Вот так сделал но кажется как то не профессионально, а если будет их 1000

$(document).ready(function() {
  
  $("#brand").change(function() {
    
    var el = $(this) ;
    
    if (el.val() === "audi") {
            $('.sel-hidden').hide();
            $('.select-audi').show();
    }else if (el.val() === "bmw") {
            $('.sel-hidden').hide();
            $('.select-bmw').show(); 
      }
  });
  
});

.sel-hidden {
  display: none
}
.sel-hidden.active{
  display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Source:
  <select id="brand" name="brand">
     <option value="audi">audi</option>
     <option value="bmw">bmw</option>
</select>

<br><br>

Audi:

<select name="audi"  class="sel-hidden active select-audi">
    <option>OPEN</option>
      <option>DELIVERED</option>
   
</select>
<br>
Bmw:

<select name="bmw" class="sel-hidden select-bmw">
    <option>bmw 3</option>
      <option>bmw 5</option>
   
</select>

Answer 1

Можете попробовать вызывать функцию скрытия/открытия только при смене значения select, передавая имя конкретной опции в качестве параметра для этой функции. Сколько бы у вас не было опций у главного select, всегда отрабатывают те 2 строчки в теле функции.

$(document).ready(function() {
  var el = $("#brand");
  
  $("#brand").change(function() {
      changeMenu($(this).val());
  });
  
});

 function changeMenu(car) {
    $('.sel-hidden').hide();
    $(`.select-${car}`).show(); 
  }   
}

.sel-hidden {
  display: none
}
.sel-hidden.active{
  display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Source:
  <select id="brand" name="brand">
     <option value="audi">audi</option>
     <option value="bmw">bmw</option>
</select>

<br><br>

Audi:

<select name="audi"  class="sel-hidden active select-audi">
    <option>OPEN</option>
      <option>DELIVERED</option>
   
</select>
<br>
Bmw:

<select name="bmw" class="sel-hidden select-bmw">
    <option>bmw 3</option>
      <option>bmw 5</option>
   
</select>

БЛОГ НА HUSL

Select выбор option, открыть нужный select?

Ответы (1 шт):