Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрыть определенный <option> в <select> если в другом <select> выбран <option> (https://javascript.ru/forum/misc/78498-skryt-opredelennyjj-option-v-select-esli-v-drugom-select-vybran-option.html)

MrRobit 22.09.2019 21:04
Скрыть определенный <option> в <select> если в другом <select> выбран <option>
 
Подскажите, пожалуйста, есть два <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>

рони 22.09.2019 22:23
зависимые селекты
 
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>

ksa 23.09.2019 08:00
Цитата:
Сообщение от рони (Сообщение 513073) 
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))
Можно еще заменить на такое...
var obj={
	"A": [5,6,7,8,9],
	"B": [0,1,2,3,8,9],
	"C": [0,1,2,3,4,5,6,7]
};
if(obj[this.value]) obj[this.value].forEach(num => options[num].setAttribute("disabled", true))

laimas 23.09.2019 08:07
Проще тогда разбить список на группы, опции которых и делать недоступными.

ksa 23.09.2019 08:13
Цитата:
Сообщение от laimas
разбить список на группы
Так у нас групп нет... :no:

laimas 23.09.2019 08:17
Цитата:
Сообщение от ksa
Так у нас групп нет...
Проблема добавить?

<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>

<select class="input-md form-control" id="sel1" name="sel1">
    <option>Выберите оборудование</option>
    <optgroup label="4 цилиндра" id="A" disabled="">
    <option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
    <option value="11700">Digitronic – (Польша)</option>
    <option value="7000">Atiker (Турция) – бюджетный комплект оборудования</option>
    <option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
    </optgroup>
    <optgroup label="6 цилиндров" id="B" disabled="">
    <option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
    <option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
    <option value="28400">BRC- (Италия), Оборудование премиум класса</option>
    </optgroup>
    <optgroup label="8 цилиндров" id="C" disabled="">
    <option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
    <option value="33600">BRC- (Италия), Оборудование премиум класса</option>
    </optgroup>
  </select>

<script>
document.getElementById("sel").addEventListener("change", function() {
    var v = this.value, o = document.querySelector('#sel1');
    o.options[0].selected = true;
    o.querySelectorAll('optgroup').forEach(function(e) {
        e.disabled = !(e.id == v)
    })
});
</script>


И делать доступными те группы, id которых равно значению списка. Зачем все опции перебирать?

ksa 23.09.2019 08:26
Цитата:
Сообщение от laimas
Проблема добавить?
Возможно...
Мы ведь не знаем как формируется контент у ТСа.

laimas 23.09.2019 08:29
Цитата:
Сообщение от ksa
Мы ведь не знаем как формируется контент у ТСа.
Ну если препарировать JS можно значит и к выводу есть доступ, который подправить то несложно. ;)

PS. Нужно еще добавить сброс второго списка при изменении первого.

рони 23.09.2019 09:39
Цитата:
Сообщение от ksa
Можно еще заменить на такое...
вершенству нет предела!
:thanks:


Часовой пояс GMT +3, время: 05:00.