Показать сообщение отдельно
  #4 (permalink)  
Старый 24.12.2017, 16:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

открывашка селектом value
Anushki,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  [data-id]{
    display: none;
  }
  [data-id].open {
    display: block;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var sel = document.querySelector('#sel'),
  div = document.querySelectorAll('[data-id]');
  sel.addEventListener('change', function() {
  [].forEach.call( div, function(el) {
         el.dataset.id == sel.value ?
         el.classList.add('open') :
         el.classList.remove('open');
  });
  });
    });
  </script>
</head>

<body>
<select id="sel">
 <option value="">-- Выбрать --</option>
 <option value="Белый">Белый</option>
 <option value="Зеленый">Зеленый</option>
 <option value="Красный">Красный</option>
 </select>

 <div data-id="Белый">Белый</div>
 <div data-id="Зеленый">Зеленый</div>
 <div data-id="Красный">Красный</div>


</body>
</html>

Последний раз редактировалось рони, 24.12.2017 в 16:51.
Ответить с цитированием