Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2019, 21:04
Новичок на форуме
Отправить личное сообщение для MrRobit Посмотреть профиль Найти все сообщения от MrRobit
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2019, 22:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,897

зависимые селекты
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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2019, 08:00
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,532

Сообщение от рони Посмотреть сообщение
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))
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2019, 08:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,977

Проще тогда разбить список на группы, опции которых и делать недоступными.
Ответить с цитированием
  #5 (permalink)  
Старый 23.09.2019, 08:13
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,532

Сообщение от laimas
разбить список на группы
Так у нас групп нет...
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2019, 08:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,977

Сообщение от 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.
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2019, 08:26
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,532

Сообщение от laimas
Проблема добавить?
Возможно...
Мы ведь не знаем как формируется контент у ТСа.
Ответить с цитированием
  #8 (permalink)  
Старый 23.09.2019, 08:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,977

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

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

Последний раз редактировалось laimas, 23.09.2019 в 08:38.
Ответить с цитированием
  #9 (permalink)  
Старый 23.09.2019, 09:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,897

Сообщение от ksa
Можно еще заменить на такое...
вершенству нет предела!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрытие строки, если не выбран checkbox Smip Элементы интерфейса 3 23.01.2013 12:48
Проверка, выбран ли checkbox, если обращаюсь к нему через $(this['id']) SkaN jQuery 1 02.03.2012 11:55
Скрыть слой если щелкнули не по нему _axl jQuery 0 13.04.2011 07:10
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Отображение времени на сайте если человек находится в другом поясе. alex244_97 Я не знаю javascript 2 20.05.2009 18:42