[RESOLVED] Change select to input

Ive changed my code below to reflect the working code

Im trying to do the change via divs and it should work once i figure out the javascript function. this is the basis of my code(naturally ive stripped out the unimportant stuff)

HTML Code:

---

<script type="text/javascript">
function state(a) {
        if(a == 'CA'){
                document.getElementById('inputOption').style.visibility = 'hidden';
                document.getElementById('selectOption').style.visibility = 'visible';
                }
        else{
                document.getElementById('inputOption').style.visibility = 'visible';
                document.getElementById('selectOption').style.visibility = 'hidden';
                }
}
</script>
<table width="916">
<tr><td width="50%" valign="top" height="25" align="right"><span class="mainsmall"><?=$lar[40]?>:</span></td><td align="left" valign="top">
<div id="inputOption" style="position:absolute; "><input type="text" name="State" class="comname" /></div>
<div id="selectOption" style="position:absolute; visibility:hidden">

<select name="country">
<option></option>
<option value="1">stuff</option>
<option value="2">Lots of stuff</option>
<option value="3">more stuff</option>
</select>

</div>
</td></tr>
<tr><td width="50%" valign="middle" height="25" align="right"><span class="mainsmall"><?=$lar[41]?>:</span></td><td align="left">
<select name="country" onchange="state(this.options[this.selectedIndex].value)">
<option></option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="BB">Barbados</option>
</select>
</td></tr>
</table>

---