Drop down lists not working together with picture

hey guys

I'm new to web design and i'm learning as I go along but i need some help with this, I have 2 drop down lists which i want to connect so that if the user selects the top one, then the bottom one will reset and vice versa so that the user can only select one size, i also want these to show an image, 1 image for the top list and 1 image for the bottom list, i can get the list working on it's own with a picture and i can get the 2 lists working on a separate page, but when i try to add the picture section to the 2 lists it all goes wrong, i have the code here if anyone can help?

I know it's something to do with the document.getElementById and the fact that it's used multiple times.

</style>

<script type="text/javascript">

window.onload=function()

{

var caption=['Default Image Caption',

'Our one piece frame selection comes in all sizes and frame styles, and ideal choice for any picture, please beaware that image cropping may occure',

'This lovely 3 piece is a fine choice to break up that wide image, the dimensions are 40" x 30", please beaware that image cropping may occure ',

'Caption3',

'Caption4',

'Caption5',

'Caption6',

'Caption7',

'Caption8',

'Caption9',

'Caption 10'], // This will be your images caption

bp='my images/Set Thumbnails/', //base url of your images

imgnum=14, //Number of your images. This should match on your comboboxes options.

thumb=document.getElementById('thumb'), //id of your image that will be changing

description=document.getElementById('caption'), //id of your caption

combobox=document.getElementById('square'); // id of your combobox

combobox=document.getElementById('rectangle'); // id of your combobox

combobox.onchange=function()

{

thumb.src=bp+'set'+this.value+'.jpg';

description.innerHTML=caption[this.value];

}

}

</script>

</head>

<div id="wrapper">

<div id="frame_size">

<div id="frame_size_Text"><br />

Please select your Acrylic Range images size you wish your image to be placed in.</div>

<div id="frame_size_content">

<div id="menu1">Square <br/><br/>

<select id="square" onchange="document.getElementById('re').value='';">

<option value=>Size</option>

<option value="2">8" x 8" - £10.99</option>

<option value="2">10" x 10" - £10.99</option>

</select></div>

<div id="menu2">Rectangle<br/><br/> <select id="rectangle" onchange="document.getElementById('sq').value='';">

<option value=>Size</option>

<option value="1">8" x 12" - £10.99</option>

<option value="1">8" x 20" - £10.99</option>

</select></div>

<div id="frame_sizes_image"><img src="my images/Set Thumbnails/set1.jpg" alt="" id="thumb" /></div>

</div>

<div id="frame_size_Footer">

<div id="frame_size_Back_btn"><a href="frame_sets.html"onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('frame_size_Back_btn','','my images/Buttons/Back_02.jpg',1)"><img src="my images/Buttons/Back_01.jpg" alt="Back" name="frame_size_Back_btn" width="102" height="14" border="0" id="frame_size_Back_btn2" /></a></div>

<div id="Image_Style_Next_btn"><a href="Image_Styles.html" rel="lyteframe" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('frame_size_Next_btn','','my images/Buttons/Next_02.jpg',1)"><img src="my images/Buttons/Next_01.jpg" alt="Next" name="frame_size_Next_btn" width="102" height="14" border="0" id="frame_size_Next_btn2" /></a></div>

</div>

</div>

</div>

</body>

</html>