Combo boxes to load in result dynamically

[Kolinski]

Hi all,  

 

I have a page with 3 comboboxes. After selecting options from the three. Onclick of the submit button I would like for an image to load in dynamically for that selection. 

 

What would the easiest and best way to implement such a feature ? 

 

Any help would be much appreciated ? 

 

[Barand]

Use the values of the combos to determine which image then use image tag src attribute to specify that image

[Kolinski]

Okay, I'm rather confused this is what I've done so far, what it does is the first combobox/listbox, on selection of a globe it changes the image to that globe. 

 

Now when I click on the second combo I want the choosen globe to load the interior/exterior/city/country IMAGE of the choosen globe above 

 

this is my code

<div id="dropdownbox_mobile">
	<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
		<label>
			<select id="sel">
				<option disabled selected>Choose your upgrade globe</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/Standard-E-City.jpg">Standard Replacement</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/PowerVision-E-City.jpg">PowerVision</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/XtremeVision-E-City.jpg">XtremeVision</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/BlueVision-E-City.jpg">BlueVision Ultra</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/CrystalVision-E-City.jpg">CrystalVision</option>
				<option value="./ajaxfiles/mobile-globerange/carbackgrounds/DiamondVision-E-City.jpg">DiamondVision</option>
			</select></label>
					</div>

			<br>
			<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
			<label>
				<select>
					<option disabled selected>Choose your Scene/View</option>
					<option>Exterior</option>
					<option>Interior</option>
					<option>City</option>
					<option>Country</option>
				</select></label>
								</div><br>
			<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
			<label>
				<select>
					<option disabled selected>Choose your Beam Pattern</option>
					<option>High</option>
					<option>Low</option>
				</select></label>
							</div>
			</div> 

Edited August 13, 2013 by Kolinski