22.09.2019, 21:04
|
|
Новичок на форуме
|
|
Регистрация: 20.09.2019
Сообщений: 4
|
|
|
Скрыть определенный <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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
|
зависимые селекты
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>
|
|
23.09.2019, 08:00
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,237
|
|
Сообщение от рони
|
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))
|
|
23.09.2019, 08:07
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Проще тогда разбить список на группы, опции которых и делать недоступными.
|
|
23.09.2019, 08:13
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,237
|
|
|
Сообщение от laimas
|
|
разбить список на группы
|
Так у нас групп нет...  |
|
23.09.2019, 08:17
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от 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 которых равно значению списка. Зачем все опции перебирать?
Последний раз редактировалось laimas, 23.09.2019 в 08:39.
|
|
23.09.2019, 08:26
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,237
|
|
|
Сообщение от laimas
|
|
Проблема добавить?
|
Возможно...
Мы ведь не знаем как формируется контент у ТСа. |
|
23.09.2019, 08:29
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от ksa
|
|
Мы ведь не знаем как формируется контент у ТСа.
|
Ну если препарировать JS можно значит и к выводу есть доступ, который подправить то несложно. 
PS. Нужно еще добавить сброс второго списка при изменении первого.
Последний раз редактировалось laimas, 23.09.2019 в 08:38.
|
|
23.09.2019, 09:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,136
|
|
|
Сообщение от ksa
|
|
Можно еще заменить на такое...
|
вершенству нет предела!
 |
|
|
|
