<select>
<option>От звука</option>
<option>В тональности</option>
</select>
<select>
<optgroup label="До">
<option>До𝄫</option>
<option>До♭</option>
<option>До</option>
<option>До♯</option>
<option>До𝄪</option>
</optgroup>
<optgroup label="Ре">
<option>Ре𝄫</option>
<option>Ре♭</option>
<option>Ре</option>
<option>Ре♯</option>
<option>Ре𝄪</option>
</optgroup>
<optgroup label="Ми">
<option>Ми𝄫</option>
<option>Ми♭</option>
<option>Ми</option>
<option>Ми♯</option>
<option>Ми𝄪</option>
</optgroup>
<optgroup label="Фа">
<option>Фа𝄫</option>
<option>Фа♭</option>
<option>Фа</option>
<option>Фа♯</option>
<option>Фа𝄪</option>
</optgroup>
<optgroup label="Соль">
<option>Соль𝄫</option>
<option>Соль♭</option>
<option>Соль</option>
<option>Соль♯</option>
<option>Соль𝄪</option>
</optgroup>
<optgroup label="Ля">
<option>Ля𝄫</option>
<option>Ля♭</option>
<option>Ля</option>
<option>Ля♯</option>
<option>Ля𝄪</option>
</optgroup>
<optgroup label="Си">
<option>Си𝄫</option>
<option>Си♭</option>
<option>Си</option>
<option>Си♯</option>
<option>Си𝄪</option>
</optgroup>
</select>
<script>
var sel = document.querySelectorAll('select');
sel[0].onchange = function(){
sel[1].style.display = this.selectedIndex ? 'none':'inline-block';
};
</script>