inner HTML u selectu

Mám dva selecty
první:

<select size="1" onchange="ChangeType(this);">

	<option value="1">Bar

	<option value="2">Kuchyn

	<option value="3">Ostatni

</select>

druhý:

<select size="1"  id="types">

	<option value="1">Alkoholické

	<option value="2">Nealkoholické

	<option value="3">Doplňky

</select>

metoda ChangeType():

var typyBar = '<option value="1" selected>Alkoholické<option value="2">Nealkoholické<option value="3">Doplňky';

var typyKuch = '<option value="1" selected>oholické<option value="2">Neaolické<option value="3">Doky';



function ChangeType(volba) {

	if(volba.value == 1) {

		sel = document.getElementById('types');

		alert(typyBar);

		alert(sel.innerHTML);

		sel.innerHTML = typyBar;

	}

	if(volba.value == 2) {

		sel = document.getElementById('types');

		alert(typyKuch);

		alert(sel.innerHTML);

		sel.innerHTML = typyKuch;

	}

	if(volba.value == 3) {

		sel = document.getElementById('types');

		alert(typyBar);

		alert(sel.innerHTML);

		sel.innerHTML = typyBar;

	}

}

kdyz se ovsem zavola sel.innerHTML = typyBar; vzdycky to orizne prvni tag <option>, takze vysledek je treba:

Alkoholické<option value="2">Nealkoholické<option value="3">Doplňky

nevi nekdo proc tomu tak je?