onchange problem?

Hi there, I've got this code, the value of the dropdown list is "{$signin_username}", and the text in bold (id=change) is also "{$signin_username}", when I change the value in the dropdown list to "{$encode}" the text in bold also changes to "{$encode}", but then when I change the value back to the original "{$signin_username}" it does not work and the text in bold doesn't change. How can I get this to work?

Thanks

<script type="text/javascript">
function alertOnChange( txtBox )
{
document.getElementById('change').innerHTML = '{$encode}';
}
</script>

<select onchange="alertOnChange( this );" >
<option value="1">{$signin_username}</option>
<option value="2">{$encode}</option>
</select>

<b id='change'>{$signin_username}</b>

HTML:

 

I managed to fix it with this code.

<script type="text/javascript">
function alertOnChange( txtBox )
{
var myTextField = document.getElementById('changer');

if(myTextField.value != "1"){
document.getElementById('change').innerHTML = '{$encode}';
}

if(myTextField.value == "1")
{
document.getElementById('change').innerHTML = '{$signin_username}';
}

}
</script>

<select id='changer' onclick="alertOnChange( this );" >
<option value="1">{$signin_username}</option>
<option value="2">{$encode}</option>
</select>

<b id='change'>{$signin_username}</b>

HTML:

 

the onchange variable is not reliable, especially on ie, glad you manage it to the "click" event.. it's more dependable