Форум

Anushki · #1 (**permalink**) 24.12.2017, 15:38

Добрый день. Помогите пожалуйста =)
Нужно чтобы отображение div'a происходило без взаимодействия с value. Так как value должен передавать определенное значение.

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

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

js?

=) плииз

рони · #2 (**permalink**) 24.12.2017, 15:56

Anushki,
использовать value ничего не мешает!!! но если очень хочется без тогда есть индекс.
и куча примеров на форуме

Anushki · #3 (**permalink**) 24.12.2017, 15:57

Сообщение от рони

Anushki,
использовать value ничего не мешает!!! но если очень хочется без тогда есть индекс.
и куча примеров на форуме

Рони а можешь показать пример на индексах и value ?

рони · #4 (**permalink**) 24.12.2017, 16:01

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>

Anushki · #5 (**permalink**) 24.12.2017, 16:06

Как всегда шедевр) спасибо Рони) ты крут

рони · #6 (**permalink**) 24.12.2017, 16:08

Anushki,

<!DOCTYPE html>

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

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var sel = document.querySelector('#sel'),
  div = document.querySelectorAll('.item');
  sel.addEventListener('change', function() {
  [].forEach.call( div, function(el, i) {
         i  == sel.selectedIndex - 1?
         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 class="item">Белый</div>
 <div class="item">Зеленый</div>
 <div class="item">Красный</div>


</body>
</html>

Anushki · #7 (**permalink**) 24.12.2017, 16:09

Сообщение от рони

Anushki,

http://jsfiddle.net/6Lohufav/31/

Рони выбери зеленый цвет.. там ошибка

Anushki · #8 (**permalink**) 24.12.2017, 16:11

а все) ясно)

Anushki · #9 (**permalink**) 24.12.2017, 16:11

http://jsfiddle.net/6Lohufav/32/

Anushki · #10 (**permalink**) 24.12.2017, 16:12

все ништяк) спасибо =)

Форум

Справочник

Discord чат

Курсы javascript