Показать сообщение отдельно
  #2 (permalink)  
Старый 22.09.2019, 22:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

зависимые селекты
MrRobit,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<div class="form-group">
  <select class="input-md form-control" id="sel" name="sel">
    <option>Выберите количество цилиндров</option>
    <option value="A">4 цилиндра</option>
    <option value="B">6 цилиндров</option>
    <option value="C">8 цилиндров</option>
    <option>ГАЗель</option>
  </select>
</div>
<div class="form-group">
  <select class="input-md form-control" id="sel1" name="sel1">
    <option>Выберите оборудование</option>
    <!--4 цилиндра-->
    <option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
    <option value="11700">Digitronic – (Польша)</option>
    <option value="7000">Atiker (Турция) – бюджетный комплект оборудования</option>
    <option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
    <!--end 4 цилиндра-->
    <!--6 цилиндра-->
    <option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
    <option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
    <option value="28400">BRC- (Италия), Оборудование премиум класса</option>
    <!--8 цилиндра-->
    <option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
    <option value="33600">BRC- (Италия), Оборудование премиум класса</option>
  </select>
</div>
<script>
  document.getElementById("sel").addEventListener("change", function() {
  var sel = document.getElementById('sel1');
  var options = [...sel.options];

  options.forEach(elem => elem.removeAttribute("disabled"))
  if(this.value == "A") [5,6,7,8,9].forEach(num => options[num].setAttribute("disabled", true))
  if(this.value == "B") [0,1,2,3,8,9].forEach(num => options[num].setAttribute("disabled", true))
  if(this.value == "C") [0,1,2,3,4,5,6,7].forEach(num => options[num].setAttribute("disabled", true))
});
</script>
</body>
</html>
Ответить с цитированием