Javascript-форум - Список select, помогите сделать.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Список select, помогите сделать. (https://javascript.ru/forum/dom-window/60606-spisok-select-pomogite-sdelat.html)

"Выпадают", это как?

Ну выпадающий список. select

выпадают "option" до 3
и
выпадают "option" от 4

Это как понять? Если в первом выбрали N, а во втором при этом должна быть выбрана опция M, это понятно. А вот до и от, это нечто...

Option со значением 1,2,3 это до 3.

Ну и что должно быть?

Если в id razd выбрана option со значением value="1", то в razd2 откроются только option value="1",value="2",value="3".А если в id razd выбрана option со значением value="2", то в razd2 откроются только option value="4",value="5",value="6".

Зависимые селекторы

Monster123,

<!DOCTYPE HTML>

<html>

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

  </style>
</head>

<body>
<p class="dragon">Дракон</p>
<select  class="color" >
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<select  class="view" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>


<script>
window.addEventListener('DOMContentLoaded', function() {
  var p = document.querySelector('.dragon'),
  select = document.querySelector('.color'),
  sel = document.querySelector('.view'),
  opt = sel.querySelectorAll('option');
  arr = [[],["1","2","3"],["4","5","6"]],
  text = p.innerHTML,
  foo =  function() {
    var val = +this.value, ar = arr[val];
    p.innerHTML = text + ['',' синий',' красный'][val];
    sel.options.length = 0;
    [].forEach.call( opt, function(el) {
           if( ar.indexOf(el.value) !== -1) sel.appendChild(el)
    });
    sel.classList[sel.options.length ? 'remove' : 'add']("hide")
  };
  select.addEventListener('change', foo);
  foo.bind(select)()
    });
</script>
</body>

</html>

Только без цвета и дракона.

Цитата:

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

Только без цвета и дракона.

сами уже