Dynamic Options using CSS to hide/show

Forum Moderators: open

Message Too Old, No Replies

Dynamic Options using CSS to hide/show

Jeremy_H

9:56 pm on Dec 8, 2005 (gmt 0)

I'm trying implement a dynamic option menu on my website.

What I'm looking for is a parent option menu to have multiple choices. And based upon a selected choice, it would use CSS to hide/show options in the next option menu. Based upon what's selected in the second option, it too would use CSS to hide/show options in the next option menu.

Scripts I have seen online have all the options scripted into the JavaScript, which means if a user comes to this site with JavaScript disabled, they would see no options in subsequent menus. What I'm looking for is if a user comes to this site with JavaScript disabled, they would see all the options in the subsequent menus, instead of just narrowed down selection.

Has anybody seen a script like this?

Jeremy_H

4:23 am on Dec 9, 2005 (gmt 0)

Actually, I guess I'm trying to reinvent the wheel.

I've been using a script just like what was said, but I'm having a hard time modifying it to reflect a new site design.

Right now, those five paragraphs at the end have to be in the text. Otherwise, when the script is run, it will result in an error.

Does anybody see how I can remove/modify part of the script so those paragraphs can be permanently taken out?

Thanks

*********************

<html>
<head>
<style type="text/css">
p.hide{display:none}
</style>
<script type="text/javascript">
function gp_showSelection() {
var e, i = 0;
while (e = document.getElementById ('sel1').options[i++]) {
document.getElementById (e.value).className = 'hide'
}
document.getElementById(document.getElementById('sel1').options[document.getElementById('sel1').selectedIndex].value).className = '';
}
function gp_dynamicSelect(n) {
var current=document.getElementById("sel"+n);
var next=document.getElementById("sel"+(++n));
if(! (current && next) ) return;
if(!next.onchange) next.onchange=function() { gp_dynamicSelect(n); };
if(!next._clone) next._clone=next.cloneNode(true);
var clazz=current.options[current.selectedIndex].value;
var nextSelValue=next.selectedIndex>-1?next.options[next.selectedIndex].value:null;
while(next.firstChild) next.removeChild(next.firstChild,true);
for(var opt=next._clone.firstChild; opt; opt=opt.nextSibling) {
if(opt.className==clazz) {
next.appendChild(opt.cloneNode(true));
}
}
var opts = next.options;
for(i=opts.length; i-- > 0;[smilestopper]) {
if(opts[i].value == nextSelValue) {
next.selectedIndex=i;
break;
}
}
next.onchange();
}
function gp_cascade() {
gp_showSelection();
gp_dynamicSelect(1);
}
function gp_init() {
if (document.getElementById && document.getElementsByTagName) {
document.write("<style type=\"text/css\">.desc{display:none}</"+"style>"[smilestopper]);
window.onload = function () {
(document.getElementById('sel1').onchange = function() {gp_cascade();}
)();
}
}
}
gp_init();
</script>
</head>
<body>
<form>

</form>