Dropdown box to change textbox?

Right now I'm using basic html, but using javascript would be fine, except I haven't really dont much JS in the past.

Lets say I have this:

<th><span class="wsp_required">+</span>Telephone<span> </span><span> </span><span> </span></th>
<td><div class=inputTextFiller><input class="inputTextLeft" type="text" name="fld14_1" id="fld14_1" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_2" id="fld14_2" value="" style="width:30px" maxlength=\"3\" /> <span> -</span>
<input class="inputTextLeft" type="text" name="fld14_3" id="fld14_3" value="" style="width:40px" maxlength=\"4\" /></div></td>


What this is, is a 3 box telephone inputbox. It works fine for general usage, but EU members have trouble.  I was wondering how I could create it so that there is a dropdown box beside this that has the two options in it: "USA" and "OTHER". When selecting OTHER, the 3 inputboxes above would become one large inputbox, and selecting USA would bring back the above 3 inputboxes.

Is this possible? If so, how can it be done with javascript (or something else while using a .html file)

Thanks!