adding a drop down menu

[dmikester1]

I want to add a drop down menu when I select an option from a current drop down menu in my page. I can get it to add text and text blanks, but the drop down menu won't show. Here is the js code:
<script language="JavaScript" type="text/javascript">
<!--
var f = document.createElement('input');
var l = document.createElement('input');
var whatName = document.createTextNode("What is your fiancee's name? ");
var onStaff = document.createTextNode("Are they on staff now?");
var os = document.createElement('select');
var first = document.createTextNode(" first:");
var last = document.createTextNode(" last:");
var br=document.createElement('br');
function create(dropdown)
{
var index = dropdown.selectedIndex;
if(index == 1) {
f.type = 'text';
l.type = 'text';
f.style.textalign = "left";
l.style.textalign = "left";
os.type = 'select';
document.getElementById('engaged').appendChild(whatName);
document.getElementById('engaged').appendChild(first);
document.getElementById('engaged').appendChild(f);
document.getElementById('engaged').appendChild(last);
document.getElementById('engaged').appendChild(l);
document.getElementById('engaged').appendChild(br);
document.getElementById('engaged').appendChild(onStaff);
document.getElementById('engaged').appendChild(os);
}
else {
document.getElementById('engaged').removeChild(whatName);
document.getElementById('engaged').removeChild(first);
document.getElementById('engaged').removeChild(f);
document.getElementById('engaged').removeChild(last);
document.getElementById('engaged').removeChild(l);
document.getElementById('engaged').removeChild(onStaff);
document.getElementById('engaged').removeChild(os);
}
}
//-->
</script>

[dmikester1]

I figured it out. Just in case anyone else has problems with this.