[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 итд