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>
