Set SelectBox value through JavaScript

I have a selectbox with multiple Options in it. I have an onchange handler on the selectbox which fires a different action depending on the selected option. This works well.

The first entry has the value 'empty' and开发者_运维百科 no display text, so when the page loads, the first empty entry is selected so any other entry can be selected and used with onchange.

What i want to do is reset the selection to the empty entry everytime an action was called. I was thinking, that couldn't be so hard :-)

I tried the following:

//setting the value of the selectbox
document.getElementById('gadgetChooser').value='empty';

//setting selectIndex
document.getElementById('gadgetChooser').selectedIndex = 0;

//setting selectIndex
document.getElementById('gadgetChooser').options[0].selected = true;

None of the above mentioned ways have an effect on the actual view of the selectbox. The only thing that changes by setting the value is the value itsself that will be submitted, but the selectbox entry is not reset.

any suggestions?

Is this what you mean? http://jsfiddle.net/BprVD/1/

Edit:

As requested by Chris, here's the complete solution http://jsfiddle.net/yahavbr/YjBWc/2/ c/o Shadow Wizard and myself.