Dynamic list Refresh!

Hello All,
I got a problem. Here is my function and its call:

Code:
function setList2(f) {
secondlist=eval(f.COUNTRY.options[f.COUNTRY.selectedIndex].value);
f.region.options.length=0;
for(i=0;i<secondlist.length;i++) {
f.region.options[i]=new Option(secondlist[i]);
};
f.region.selectedIndex=0;
};

<TR> <TD><h2>Address Information</h2> </TD> </TR><TD> Please select your Country </td><td> <FORM NAME=”listsform”>
<SELECT NAME=”COUNTRY” onChange=”setList2(form); checkDisable(form)”>
<OPTION selected VALUE=”not_selected” >Select</OPTION>
<OPTION VALUE=”Canada”>Canada</OPTION>
<OPTION VALUE=”USA”>USA</OPTION>
<OPTION VALUE=”Test”>Others</OPTION>
</SELECT> </td> </tr>

……
<TR><TD>Canadian/US Province or State:</TD><td> <SELECT NAME=”region”>
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
<OPTION></OPTION>
</SELECT> </td> </tr>

Here is the problem. Things work fine as long as the user selects appropriate options. The problem arises when the user changes options. If the user selects “Canada” as country, the “region” field populated with the Provinces of Canada. But if the user changes it to “others”, the value remains in the region field! I want it to be gone as soon as it is changed to other!

Help please!!!!
Thanks,
Jamal

Also in #JavaScript _↴