1

Есть основной 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>

1 ответ 1

0

Можете попробовать вызывать функцию скрытия/открытия только при смене значения 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.