Модификация списка

[uefa]

Подскажите, пожалуйста, почему не работает такая конструкция:

HTML

<select id="lbFeeds">
<optgroup label="opt1">
<option value="421">А</option>
<option value="422">В</option>
</optgroup>
<optgroup label="opt2">
<option value="445">G</option>
<option value="446">H</option>
</optgroup>
</select>

JS

function changeSel(i) { 
 var lbFeeds = document.getElementById("lbFeeds");
 var opt = lbFeeds.getElementsByTagName("optgroup");
 for (var j = 0; j < opt.length; j++) {
 alert(opt[j].label);
 if (j != i) {
 opt[j].style.display = "none";
 }
 }
}

Нужно, чтобы в зависимости от полученного в функцию значения переменной i отображалась только часть селекта. Посмотрите опытным глазом.

Сразу скажу, что попытки сделать display="none" для результата также не дали.

[ZoNT]

Селект - это элемент "системный", функциональность не такая как у обычных элементов (например дивов)...

Почему просто не удалять ненужные элементы и не добавлять нужные динамически?