Question : Change div position when dropdown menu item is selected

I have a div with an id of 'businessTypeX'. I have specific coordinates that I need to move the div, depending on the selection in a dropdown with an id of 'typeSelection'.

I need a function to place on the dropdown onchange, that will check the current selection of the dropdown, and then change 'top' and 'left' of 'businessTypeX' to the desired pixels.

Example:
option 1 = Change 'businessTypeX' to top: 517px, left: 21px
option 2 = Change 'businessTypeX' to top: 533px, left: 265px
etc...

Answer : Change div position when dropdown menu item is selected

Check this out...

this is dynamic, hope it works

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

</head>  
<body>  
<br />  
<form NAME="form1">
<select id="typeSelection" name="typeSelection"
	onchange="document.getElementById('businessTypeX').style.left=document.forms.form1.typeSelection[document.forms.form1.typeSelection.selectedIndex].getAttribute('left');
	document.getElementById('businessTypeX').style.top=document.forms.form1.typeSelection[document.forms.form1.typeSelection.selectedIndex].getAttribute('top');">  
    <option value="pos1" left="500 px" top="200px">1</option>  
    <option value="pos2" left "1000 px" top="300px">2</option>  
</select>  
<div id="businessTypeX" STYLE="position:absolute;">businessTypeX</div>  
</form>
</body>  
</html>

           
         