select does not display new child in IE7

[Pugi!]

I have an input element (fValue) and a select element (fList) and 2
buttons add and modify. When I enter some text in the input element
and press add, it is added to the select element, when I press modify
the text of the selected option element (not the value attribute) in
the select is modified. It works fine for both functions in Opera, FF
and Safari, but only for the add function in IE7. The modify function
in IE7 does not display the change unless I move the cursor over one
of the form elements.

add button: onclick event: add2Select(fValue.value, 'fList')
function add2Select(val, dest) {
if (val == undefined || dest == undefined) return;
if (val.trim() != '') {
target = document.getElementById(dest);
option = document.createElement('option');
option.setAttribute('value', '');
txt = document.createTextNode(val.trim());
option.appendChild(txt);
target.appendChild(option);
}
}
Works fine in all browsers.

modify button:modSelected(fValue.value, fList.selectedIndex, 'fList')
function modSelected(newval, seli, dest) {
if (newval==undefined || seli==undefined || seli==-1 ||
dest==undefined ||
newval.value.trim()=='') { alert('Empty value'); return; }
var elmdest = document.getElementById(dest);
var options = elmdest.getElementsByTagName('option');
var option = document.createElement('option');
if (options[seli].getAttribute('value') != undefined) {
option.setAttribute('value',
options[seli].getAttribute('value'));
}
option.appendChild(document.createTextNode(newval.value.trim()));
if (seli < (options.length - 1)) {
elmdest.insertBefore(option, options[seli]);
elmdest.removeChild(options[seli+1]);
} else {
elmdest.removeChild(options[seli]);
elmdest.appendChild(option);
}
}
other approach:
function modSelected(seli, newval, dest) {
if (seli == undefined || newval == undefined || dest == undefined)
return;
if (newval.trim() == '') return;
var target = document.getElementById(dest);
var options = target.getElementsByTagName('option');
removeAllChildren(options[seli]);
txt = document.createTextNode(newval.trim());
options[seli].appendChild(txt);
}
other approach:
function modSelected(src, dest) {
if (src == undefined || dest == undefined) return;
newval = src.value;
if (newval.trim() == '') return;
if (dest.selectedIndex == -1) return;
dest.options[dest.selectedIndex].text = newval;
}

Problem with last solution is when you call the function like this
modSelected(fValue, fList) or even
modSelected(document.formname.fValue, document.formname.fList) IE7 has
no idea what you are talking about (undefined), while the other
browsers accept the reference to the form elements.

I know it has been a long day, but I can't figure out why the change
of the option text isn't displayed using the modSelected function IN
IE7 and it works fine for the add2Selected and even the delSelected
function. In other browsers (Opera, FF and Safari for Windows that is)
it works fine. Even when I remove the selected option and insert a new
one. The appendChild in add2Select triggers the refresh of the select
(or whatever it is called) in IE7 but not in modSelected.

JM