SELECT and Show/Hide

[TonyRosen]

I've searched all day for a workable solution to this, but alas, nothing . . .

I have a SELECT dropdown in my form which is dynamically generated with the "value" tag being a number between 1-99. If the user selects "1" then I want to show Layer1, if the user selects "11" then I want to show Layer2, otherwise, I want to show Layer3. If the user selects "1" and then changes their mind, and selects "11" then I need to "hide" Layer1 and show Layer2.

I have all the solutions in the world, if I wanted to use radio buttons, but that's not the solution I want. As well, if I wanted to do this by a link, I have all the solutions. But again, that's not what I'm needing. Every answer I find deals with checkboxes, radios, links, and buttons . . . but nothing for a SELECT element.

Thanks in advance for your assistance!

 

[stormbind]

The firing event you want is probably onchange=""

I haven't tested but see no reason why the following will not work. Hopefully you can use it to fire your existing solutions

onchange="alert(this.value);"

----------
I'm willing to trade custom scripts for... [see profile]

 

[TonyRosen]

I've tested the "alert(this.value)" already and it gives me exactly the choice I made. However, it's the hiding/showing of layers that give me all kinds of fits.

 

[stormbind]

Can you post the function?

document.getElementById('myLayer').display='none'; (DOM syntax) should remove any object from view but some browsers are fickle and require the object to be positioned absolutely.

----------
I'm willing to trade custom scripts for... [see profile]

 

[TonyRosen]

I could if I hadn't messed around with it enough and tried about 20 different versions.

Nevermind, I'll find another way to do this. This is absolutely ridiculous.

All I want it to do is:

if my selection = 1 then, change layer 1 to "display: block;"

etc....

And, NOTHING works.

 

[stormbind]

Does this help?

onchange="showLayer(this.value)"

<script>
function showLayer(input){

if (input=='expectedValueOfChoice'){
document.getElementById('layer1').display='none';
document.getElementById('layer2').displat='default';
} else {
document.getElementById('layer1').display='default';
document.getElementById('layer2').displat='none';
}

}
</script>

----------
I'm willing to trade custom scripts for... [see profile]

 

[TonyRosen]

Okay, this one works, but I have one final issue:

==================
<script language="javascript">
function selectPriRefSrc(form) {
var oSel = eval("form.oFormType"
var userSelection = oSel.options[oSel.selectedIndex].value;
switch (userSelection) {
case "11":
document.all.internet.style.display = "block";
document.all.edCon.style.display = "none";
document.all.other.style.display = "none";
break;
case "1":
document.all.internet.style.display = "none";
document.all.edCon.style.display = "block";
document.all.other.style.display = "none";
break;
}
return;
}
</script>
==============================

Now, my issue would be, if the selection is NOT "1" or "11", I want the DIV "other" to show. How would I do that?

 

[TonyRosen]

Figured it out!!!!!!!

=====================================
<script language="javascript">
function selectPriRefSrc(form) {
var oSel = eval("form.oFormType"
var userSelection = oSel.options[oSel.selectedIndex].value;
switch (userSelection) {
case "11":
document.all.internet.style.display = "block";
document.all.edCon.style.display = "none";
document.all.other.style.display = "none";
break;
case "1":
document.all.internet.style.display = "none";
document.all.edCon.style.display = "block";
document.all.other.style.display = "none";
break;
// Added these two lines!
default:
document.all.other.style.display = "block";
}
return;
}
</script>
=====================================