Click to See Complete Forum and Search --> : Can someone help me modify this script?
Tasmanian Devil
07-19-2003, 08:57 AM
I was wondering if the following script can 1) change the second option based on the first and then the third based on the second? 2) when the third option is picked, and the user pushes a button then it goes to a page based on that option?
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
var numOfSelects=3; // Be sure to set this number equal to the number of Select elements you have on the form
function hide() {
for (i=2;i<=numOfSelects;i++) {
document.getElementById('pullDown'+i).style.display='none';
}
}
function showOptions(opt) {
num=eval(opt.name.charAt(8))+1;
if (num<=numOfSelects) {
if (opt.value=='') {
for (i=num;i<=numOfSelects;i++) {
document.getElementById('pullDown'+i).style.display='none';
}
}
else {
document.getElementById('pullDown'+num).style.display='inline';
for (i=num;i<numOfSelects;i++) {
if (document.getElementById('pullDown'+i).value!='') {
document.getElementById('pullDown'+(i+1)).style.display='inline';
}
}
}
}
}
</script>
</head>
<body onLoad="hide()">
<form name="frm1">
<select name="pullDown1" id="pullDown1" onchange="showOptions(this)">
<option value="" selected>Menu 1</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<br><br>
<select name="pullDown2" id="pullDown2" onchange="showOptions(this)">
<option value="" selected>Menu 2</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<br><br>
<select name="pullDown3" id="pullDown3" onchange="showOptions(this)">
<option value="" selected>Menu 3</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
</form>
</body>
</html>
Thanks
David Harrison
07-19-2003, 10:23 AM
There was a similar question like this yesterday, however not quite this big. All I can say is thank God you only have three select boxes with only two options in each because the script goes up exponentially with each select box you have. I'm sure that there must be an easier way but this was the first one I thought of off the top of my head.
The source is very complicated so i've tried to give the div tags that contain the select boxes systematic names as well as the forms. I've added a few comment tags in the functions and a couple in the body.
If I think of a better way I'll let you know but until then I'm afraid you're stuck with this.
Edit: By the way, I didn't modify yours I went away and wrote one from scratch, I just can't seem to understand how a script works unless I create it myself, (well I can but it just takes a long time). :)
Tasmanian Devil
07-19-2003, 10:38 AM
lavalamp~
I am looking for the button to go to a certain page rather than to use an alert message.
Thanks
David Harrison
07-19-2003, 10:43 AM
Well for that you could just use a series of if/else statements like this:
if(results=="A, A, A"){window.location.href="http://www.w3.org/";}
else if(results=="A, A, B"){window.location.href="http://www.geocities.com/caulolli/";}
else if(results=="A, B, A"){window.location.href="http://www.sfcave.com/";}
else if(results=="A, B, B"){window.location.href="http://www.postopia.com/";}
etc.
Tasmanian Devil
07-19-2003, 10:46 AM
lavalamp~
Where exactly would I put that? somewhat new at this still
Thanks
David Harrison
07-19-2003, 10:50 AM
I had a feeling that you may ask that which is why, once I replied, I started preparing this:
Tasmanian Devil
07-19-2003, 11:01 AM
lavalamp~
One more thing, can I make the second and the third opions hidden till the one before is picked?
Thanks
David Harrison
07-19-2003, 11:07 AM
Well by default I've made it so that Option A is always selected but to do what your asking it would have to be made so that there is no default value. It should be a simple fix, so just gimme a few mins and I'll see what I can do.
Edit: Oh and also, would you like the button hidden until they have selected three options?
Tasmanian Devil
07-19-2003, 11:09 AM
PLEASE PLEASE PLEASE
Thanks
David Harrison
07-19-2003, 11:45 AM
OK, here we go, weighing in at a whopping 8.10 Kb, version three of that select box thingy. :D :D :D
Tasmanian Devil
07-19-2003, 12:31 PM
lavalamp~
Thank you so much, you are the wo/man. are you any good with php also?
Thanks
David Harrison
07-19-2003, 12:37 PM
I'm pretty sure that I'm male, (maybe I should put that in my biography).
Unfortunately I've never touched PHP, although I'm about to start learning ASP.
Don't worry though because I hear that they have a whole forum for it. :)
Tasmanian Devil
07-19-2003, 01:20 PM
lavalamp~
I was wondering, I know it will increase the size, but what if I wanted to add say five more options the first pulldown? if you can show me what I need to change and how to change it, I think I can get it for the second and third.
Thanks
David Harrison
07-19-2003, 03:17 PM
The problem is that not only will it increase the size, it will mean burying yourself in code and it will get a lot more complicated.
The script's lay out is like this:
if A for drop down 1{
display dropdown 2 that corresponds to that selection
if A for drop down 2{
display dropdown 3 that corresponds to that selection
}
if B for drop down 2{
display dropdown 3 that corresponds to that selection
}
}
if B for drop down 1{
display dropdown 2 that corresponds to that selection
if A for drop down 2{
display dropdown 3 that corresponds to that selection
}
if B for drop down 2{
display dropdown 3 that corresponds to that selection
}
}
And that's not including displaying the button, finding the results or if there is nothing selected.
I'll do my best to bump them up to five options each. After I've done that I'll work on a better way to produce this effect, perhaps using array's and loops.
David Harrison
07-19-2003, 03:59 PM
Just to let you know, we are talking about tomorrow, no earlier that about 4:00, by the time I reply with the code.
Tasmanian Devil
07-19-2003, 06:16 PM
No problem there, it is greatful that your helping me this far.
Thanks
David Harrison
07-20-2003, 04:30 PM
Here you go, better late than never. I had to go out today so I couldn't reply when I said I would.
So here it is version 4, I did a complete re-write of it ALL, I actually started with a blank document and ended up with a masterpiece, it only works on IE and Opera 7.02 but I'm working on that, and it's still a masterpiece all the same.
There's a ton of HTML still, so you may be drowning in that but the actual script has been slashed to just 74 lines, not bad considering what the other one would have been if I'd just modified that one.
I'm going to work on a way of reducing the HTML by only having three dropdown menus and repopulating them depending on the choices made rather than hiding or showing the appropriate menu.
Also there is a bug with the reset button, so I'm going to replace that with a normal button a function that will do the same job (but better).
So 6 and a half hours after I promised it, here it is, (I don't know what time zone you're in so it may be around 4:00 where you are, I'm on GMT time by the way).
Tasmanian Devil
07-20-2003, 07:42 PM
It is grateful for your help so far, I was wondering if it is possible for netscape?
Thanks
Tasmanian Devil
07-21-2003, 01:30 PM
lavalamp~
I love your script and able to adjust as needed, I was wondering if ther is any way that the page the the user goes to after the third choice is selected and pressed the button, can we maybe just referance the last pulldown or something along those lines?
Thanks
David Harrison
07-21-2003, 01:36 PM
I was trying to find out why it doesn't work on Netscape today actually, but I've had no luck so far. Don't worry though I'll find it.
I fixed the reset button by not actually using a reset button, but just a normal button and a javascript function.
I'll try and make it work for Netscape, and when it does it should also work for Mozilla and Opera.
Tasmanian Devil
07-21-2003, 01:38 PM
Any way just to referance the last pulldown for the page the user gets sent to?
Thanks
David Harrison
07-21-2003, 02:42 PM
Well you can do that in one of two ways, you can detect the visible select box and detect the index that is selected and then send them to the appropriate page.
Or you can give each option a value and detect the value that is selected. I've done it the first way here because otherwise it would have taken a lot longer for me to reply. If you would prefer me to detect the value let me know and I'll get back to you that day after tomorrow, (I'm going out tomorrow).
Tasmanian Devil
07-21-2003, 02:48 PM
lavalamp~
let me mess arond with the script that you have given me and I will get back to you in two days then. Thank you so much
Thanks
David Harrison
07-21-2003, 02:51 PM
Thank you so muchYou're welcome. :)
Tasmanian Devil
07-23-2003, 01:14 PM
lavalamp~
Your script works great so far, one question. What does the p==1 mean?
Thanks
David Harrison
07-23-2003, 01:42 PM
There are 25 select boxes for the third option that the user can make. This piece of script searches for the one that is visible and adds 1 to it:
for(var p=0;p<d3box.length;p++){if(d3box[p].style.display=="block"){break;}}p++;
This piece of script detects which option is selected in the visible select box:
var s_o=d3box[p-1].selectedIndex;
If the first select box is selected the possible options are:
AAA, AAB, AAC, AAD, AAE
then there is a series of if/else statements, the first one is this:
if(p==1 && s_o==1){goto="http://www.w3.org/";}
translated this means, if the first select box is visible and the selected option is the second one (because the default option is the first one which is nothing), the variable goto is assigned the value http://www.w3.org/ .
All of which means if the selected value is AAA goto="http://www.w3.org/"
the reason for it being p==1 is that for if/else statements there always seems to be two of everything && (and), == (equals), || (or) etc., there are exceptions though like greater than is just > and less than is < .
I haven't found out why it doesn't work with Netscape yet by the way, I've only been back for a short while today so I haven't had time to problem solve. :(
Tasmanian Devil
07-23-2003, 02:16 PM
lavalamp~
That is quit all right. you have been very helpful to begin with. Now I also understand the reason of the question that I had asked.
Thanks
Tasmanian Devil
07-23-2003, 03:30 PM
lavalamp~
so if I change the p==2, then that would give me a second set of option? ie. BA, BB, BC, BD, BE. is that correct?
Thanks
David Harrison
07-23-2003, 03:38 PM
Almost, if p==2 then the new options would be:
ABA, ABB, ABC, ABD, ABE
and if p==3:
ACA, ACB, ACC, ACD, ACE
etc.
if p==6:
BAA, BAB, BAC, BAD, BAE
Tasmanian Devil
07-24-2003, 03:16 PM
lavalamp~
where is a question for you,now say I was not to conserned about the second pulldown, can we make it so that it just uses the first and third pulldown for the page the user goes to? I need the second pulldown but it is not that inportant.
Thanks
David Harrison
07-24-2003, 03:29 PM
It's funny that you should say that because I have modified it so that it only needs the selected option from the visible third dropdown menu.
Also I have now tested it in the following browsers:
* IE 6
* Mozilla 1.4
* Mozilla Firebird 0.6
* Netscape 4.79, 6.22, 7.02, 7.11
* Opera 5.02, 6.00, 7.11
But it does not work in:
* Netscape 4.79
* Opera 5.02, 6.00
Not bad considering that it was IE only before.
Tasmanian Devil
07-24-2003, 03:48 PM
lavalamp~
YOUR THE MAN!!! THANK YOU SO MUCH!!!
Thanks
P.S. you do not have to worry about it working in just those few
David Harrison
07-24-2003, 03:52 PM
Just those few?:confused:? 7/10 isn't bad.
Anyway, I'm just happy to help. :)
Tasmanian Devil
08-15-2003, 08:10 AM
lavalamp~
I was wondering, just to say if I waned to add an opion to the all of the pulldown menus, what line or lines do I modify?
Thanks
David Harrison
08-15-2003, 02:30 PM
I've included a few instructions as to how to add more options in case you need to do this again in the future.
Unfortunately you still have to have the same number of options in each second level select box so if I figure out a way around it I'll let you know.
Tasmanian Devil
08-20-2003, 12:26 PM
lavalamp~
I was wondering if it is possible to have say the first pulldown have seven options and the second varies based on first selection and then the third varies based on the second?
Thanks
David Harrison
08-20-2003, 02:17 PM
Like this?
Tasmanian Devil
08-20-2003, 02:41 PM
lavalamp~
Yes but can I add and subtract from each one as needed?
David Harrison
08-20-2003, 02:52 PM
Why is that, do you have several of these on one page or something?
Well whatever the reason with this script that isn't possible. I'd have to go away and tinker around with it a bit, but it may result in making the script very long.
Tasmanian Devil
08-20-2003, 03:08 PM
lavalamp~
The first pulldown I need sevn options (will not change), second pulldown I need tweleve (that might change), and the third one I need twenty five (that will change). Any ideas?
Thanks
P.S. lets make it a easier on you. The first pulldown I need seven options and the second pulldown will have twelve options but only laid out in three different ways. And the third one is twenty five options however I only need twelve laid out different. Do you understand what I mean?
David Harrison
08-20-2003, 03:19 PM
Well I don't have what can even be called the beginnings of an idea, and no I don't know what you mean.
However by tomorrow I may have had an idea and I'm sure that if you make another post I'll be able to understand what you mean.
Tasmanian Devil
08-20-2003, 04:01 PM
lavalamp~
here is a better way I think:
<Select1>
<>1
<>2
<>3
<>4
<>5
<>6
<>7
</Select>
If 1-3 are selected then the second pulldown would look like:
<Select1>
<>1
<>2
<>3
<>4
<>5
<>6
<>7
<>8
<>9
<>10
<>11
<>12
</Select>
If 4-6 are selected then the second pulldown would look like:
<Select1>
<>4
<>5
<>6
<>7
<>8
<>9
<>10
<>11
<>12
<>1
<>2
<>3
</Select>
If 7 is selected then the second pulldown would look like:
<Select1>
<>7
<>8
<>9
<>10
<>11
<>12
<>1
<>2
<>3
<>4
<>5
<>6
<>7
</Select>
and then three layouts the same way off each second pulldown. Does that help a little?
Thanks
David Harrison
08-20-2003, 04:07 PM
I'd going to quote you when I say:I have no clueMaybe if you were to make an example, not with any js but with a few menus showing where you want them.
Tasmanian Devil
08-21-2003, 04:12 PM
pulldown one as:
1
2
3
4
5
6
7
when 1,2,3 are selected pulldown two as:
1
2
3
4
5
6
7
8
9
10
11
12
when 4,5,6 are selected pulldown two as:
4
5
6
7
8
9
10
11
12
1
2
3
when 7 is selected pulldown two as:
7
8
9
10
11
12
1
2
3
4
5
6
that is a start so far do you understand?
I know we started with one thing and might end up with something else, but I am greateful of your help even though things change.
Thanks
P.S. I have to make a example how the third one would look like
David Harrison
08-22-2003, 03:37 PM
Well I've got no idea what you want the third dropdown to look like but I've done the first two like you demonstrated:
Tasmanian Devil
08-24-2003, 07:44 PM
lavalamp~
the third pulldown menu, all I need it to have twenty five options and which ever option is picked, it will take them to a different page (just have you have it now).
Thanks
P.S. hope you understand :D
David Harrison
08-25-2003, 02:15 PM
Well here's the third dropdown then:
Tasmanian Devil
08-26-2003, 07:44 PM
lavalamp~
I am very greateful for your help, is there an easy way to add and delete to each pulldown?
Thanks
David Harrison
08-27-2003, 02:17 PM
How about I just write a dropdown menu creater? That way you can have as many or as few as you like.
Tasmanian Devil
08-28-2003, 04:27 PM
lavalamp~
can you creat a concept of your idea but with this idea? (http://javascript.internet.com/navigation/MenuBuilder/index.html)
Thanks
David Harrison
08-28-2003, 04:41 PM
I have found that just making one at all is difficult enough.
If you already know of a menu creator why did you ask on the forum for a menu? Does it not create a menu as you want it?
The script I am working on now will create menus of the type that you first asked for and so should be suitable, however I am afraid that it won't look anything like the menu creator that you posted a link to.
Once it is finished you can feel free to dress it up any way you like.
Tasmanian Devil
08-28-2003, 09:36 PM
lavalamp~
I just found the menu creator today, and second of all it only make two not three menu pull-downs
Thanks
David Harrison
08-29-2003, 01:20 PM
Well I'll let you know when I get my menu generator up and running, but right now I might as well have been smashing my head into a brick wall for all the progress I've made. It's proving almost impossible, so many variables and arrays, all with similar names.