Скрытие элемента при выборе option в select

[html'щик]

Здравствуйте (сразу скажу я немного далек от темы js), есть два списка select (первый видимый, второй невидимый), при выборе первой option в первом селекте нужно чтобы второй селект становился видимым. Помогите пожалуйста

<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>

[j0hnik]

<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>

	<script>
var sel = document.querySelectorAll('select');
sel[0].onchange = function(){
	sel[1].style.display = this.selectedIndex ? 'none':'inline-block';
};
	</script>

[html'щик]

Большое спасибо, все работает . А вы можете объяснить суть работы скрипта, просто еще надо сделать, чтобы при выборе каждой option во втором селекторе появлялась соответствующая картинка. Попытался понять сам, но не понял

[j0hnik]

с картинкой надо будет немного по другому.

[html'щик]

Можете написать как? А то весь интернет перерыл, инфы не нашел.

[j0hnik]

<select>
	  <option>От звука</option>
	  <option>В тональности</option>
  </select>
	<select>
		<optgroup label="До">
		<option>До&#119083</option>
		<option>До&#9837</option>
		<option>До</option>
		<option>До&#9839</option>
		<option>До&#119082</option>
		</optgroup>
		<optgroup label="Ре">
		<option>Ре&#119083</option>
		<option>Ре&#9837</option>
		<option>Ре</option>
		<option>Ре&#9839</option>
		<option>Ре&#119082</option>
		</optgroup>
		<optgroup label="Ми">
		<option>Ми&#119083</option>
		<option>Ми&#9837</option>
		<option>Ми</option>
		<option>Ми&#9839</option>
		<option>Ми&#119082</option>
		</optgroup>
		<optgroup label="Фа">
		<option>Фа&#119083</option>
		<option>Фа&#9837</option>
		<option>Фа</option>
		<option>Фа&#9839</option>
		<option>Фа&#119082</option>
		</optgroup>
		<optgroup label="Соль">
		<option>Соль&#119083</option>
		<option>Соль&#9837</option>
		<option>Соль</option>
		<option>Соль&#9839</option>
		<option>Соль&#119082</option>
		</optgroup>
		<optgroup label="Ля">
		<option>Ля&#119083</option>
		<option>Ля&#9837</option>
		<option>Ля</option>
		<option>Ля&#9839</option>
		<option>Ля&#119082</option>
		</optgroup>
		<optgroup label="Си">
		<option>Си&#119083</option>
		<option>Си&#9837</option>
		<option>Си</option>
		<option>Си&#9839</option>
		<option>Си&#119082</option>
		</optgroup>
	</select>
<img id="imgSel" alt="4">
	<script>
var sel = document.querySelectorAll('select');
sel[0].onchange = function(){
	sel[1].style.display = this.selectedIndex ? 'none':'inline-block';
	imgSel.style.display = this.selectedIndex ? 'none':'inline-block';
};

sel[1].onchange = function(){
	imgSel.src = 'image/'+this.selectedIndex+'.jpg';
};
	</script>

можно вот так сделать, и картинки называть 0.jpg, 1.jpg итд

[рони]

html'щик,
искать кастомизация селекта
https://ruseller.com/lessons.php?id=805&rub

[рони]

html'щик, ник у вас для данного форума неудачный, по техническим причинам!!!