0

Подскажите, пожалуйста, есть два <select> , нужно сделать так, чтобы если в первом был выбран определенный то в другом <select> скрывались определенные <option>. Пока у меня работает так, но проблема в том, что он не сбрасывает, то есть если я выберу другой вариант, то они не активируются

var type_id = document.getElementById("sel");
type_id.onchange = function() {
  if (type_id.options[type_id.selectedIndex].value == 'A') {
    var sel = document.getElementById('sel1');
    sel.options[5].setAttribute('disabled', true);
    sel.options[6].setAttribute('disabled', true);
    sel.options[7].setAttribute('disabled', true);
    sel.options[8].setAttribute('disabled', true);
    sel.options[9].setAttribute('disabled', true);
  }
  if (type_id.options[type_id.selectedIndex].value == 'B') {
    var sel = document.getElementById('sel1');
    sel.options[1].setAttribute('disabled', true);
    sel.options[2].setAttribute('disabled', true);
    sel.options[3].setAttribute('disabled', true);
    sel.options[4].setAttribute('disabled', true);
    sel.options[8].setAttribute('disabled', true);
    sel.options[9].setAttribute('disabled', true);
    sel.options[5].setAttribute('enable', true);
    sel.options[6].setAttribute('enable', true);
    sel.options[7].setAttribute('enable', true);
  }
};
<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>

8
  • Желательно превести html и всё это оформить в снипет
    – doox911
    22 сен 2019 в 17:17
  • @doox911 добавил html, прости, не могу включить снипет, не нашел как)
    – Mr.Flatman
    22 сен 2019 в 17:31
  • А что сложного дописать style="display:none"?
    – doox911
    22 сен 2019 в 18:00
  • кажется можно обойтись одним лишь css 22 сен 2019 в 18:01
  • @doox911 select option[disabled] { display: none; } дописано
    – Mr.Flatman
    22 сен 2019 в 18:02

1 ответ 1

1

$('#sel').on('change', function() {
  $('option.sub').each(function() {
    $(this).css({
      'display': 'inline'
    });
  });
  switch (this.value) {
    case 'A':
      $('option.sub').each(function() {
        if ($(this).data().value !== 'A') $(this).css({
          'display': 'none'
        });
      });
    break;
    case 'B':
      $('option.sub').each(function() {
        if ($(this).data().value !== 'B') $(this).css({
          'display': 'none'
        });
      });
    break;
    case 'C':
      $('option.sub').each(function() {
        if ($(this).data().value !== 'C') $(this).css({
          'display': 'none'
        });
      });
    break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 class="sub" data-value="A" value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
    <option class="sub" data-value="A" value="11700">Digitronic – (Польша)</option>
    <option class="sub" data-value="A" value="7000">Atiker (Турция) – бюджетный комплект оборудования</option>
    <option class="sub" data-value="A" value="12400">BRC- (Италия), Оборудование премиум класса)</option>
    <!--end 4 цилиндра-->
    <!--6 цилиндра-->
    <option class="sub" data-value="B" value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
    <option class="sub" data-value="B" value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
    <option class="sub" data-value="B" value="28400">BRC- (Италия), Оборудование премиум класса</option>
    <!--8 цилиндра-->
    <option class="sub" data-value="C" value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
    <option class="sub" data-value="C" value="33600">BRC- (Италия), Оборудование премиум класса</option>
  </select>
</div>

6
  • Спасибо большое, добавил, возник другой вопрос, подскажите, пожалуйста, с первого раза не сортирует, в чем может быть причина jsfiddle.net/376L04zs
    – Mr.Flatman
    22 сен 2019 в 18:56
  • @Mr.Flatman 1. Там у вас не форматированный код, аж глаза кровоточить начали. 2. Нет html. 3. Что в вашем понимании означает "с первого раза"?
    – doox911
    22 сен 2019 в 19:06
  • добавил все, только на другой редактор repl.it/repls/WebbedWholeMegahertz Просто у меня, если я сразу выбираю допустим 4 цилиндра он sel1 не изменяет, нужно выбрать другой цилиндр и тогда будут изменения, то есть два раза переключиться
    – Mr.Flatman
    22 сен 2019 в 19:31
  • 1. Опустите js к </body>. 2. Зачем вы функцию обернули, так ещё и её по событию вызываете?
    – doox911
    22 сен 2019 в 19:35
  • ну да, как я прочитал что лучше сделать так, типа при изменении формы вызывается функция
    – Mr.Flatman
    23 сен 2019 в 5:08

Ваш ответ

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

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