PDA

View Full Version : on change(dropdown) change 2 div



emanuelle
06-20-2010, 08:50 AM
I have a drop down. for every option (in drop down) it must change the content of the form and some extra text.
Attached the code
<script>
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)


</script>
<form name="dropmsgform">
I need help with: <select name="dropmsgoption" onChange="expandone()">
<option selected>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</form>

<div style="float:left;display:inline" id="dropmsg0">form 1</div> <div style="float:left;display:inline"> text for form 1</div>
<br />
<div style="float:left;display:inline" id="dropmsg1">form 2</div> <div style="float:left;display:inline"> text for form 2</div>
<br />
<div style="float:left;display:inline" id="dropmsg2">form 3</div> <div style="float:left;display:inline"> text for form 3</div>



The 2 div(form and text) must be in seperated div cause they are located to different parts of the page

emanuelle
06-20-2010, 10:11 AM
please please I really need help!!!