[SOLVED] Multiple list boxes not working

[Zergman]

I have 3 list boxes that I need to parent/child and so on.

 

When I select an option in the first box, the next one doesn't change.

 

Can someone check my code?

 

I have this right above my </head> tag

<script type="text/javascript">
function setOptions(chosen,selbox) {
// selbox assignment deleted

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.myform.optthree),5);

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('first choice - option one','11');
  selbox.options[selbox.options.length] = new
Option('first choice - option two','12');
setTimeout(setOptions('11',document.myform.optthree),5);
}
// repeat for entries in first dropdown list

if (chosen == "11") {
  selbox.options[selbox.options.length] = new
Option('first choice - option one - sub one','111');
  selbox.options[selbox.options.length] = new
Option('first choice - option one - sub two','112');
}
// repeat for all the possible entries in second dropdown list
}
</script>

 

<form name="myform"><div align="center">
<select name="optone" size="10"
onchange="setOptions(document.myform.optone.options
continued from previous line[document.myform.optone.selectedIndex].value,
continued from previous linedocument.myform.opttwo);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>

<select name="opttwo" size="10"
onchange="setOptions(document.myform.opttwo.options
continued from previous line[document.myform.opttwo.selectedIndex].value,
continued from previous linedocument.myform.optthree);">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>

<select name="optthree" size="10">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.optthree.options
continued from previous line[document.myform.opttwo.selectedIndex].value);">
</div></form>

 

Any help would be greatly appreciated

[Ken2k7]

1. What's with the "continued from previous line"? That makes things hard to read.

2. I don't fully understand what you're trying to do. ??? So what SHOULD happen if you select an option from the first drop-down whose value isn't " " ?

3. When would chosen ever equal "11"?

4. What is the purpose of setTimeout?

5. Why do the second and third dropdown have an onchange function? There's nothing there for them to change. ???

[Zergman]

Thanks for the reply 

 

I found the code here http://javascript.about.com/library/bl3drop.htm.

 

Basically im trying to do 3 simple list boxes in a submit form setup like a parent/child/subchild where child changes based on what is selected in parent and so forth.  I don't need the info in the boxes to be pulled from a database as they will be static and probably never change.

 

Weirdly, this has completely stressed me out as I can't find anything (i can understand) that works.

[Zergman]

I originally tried to get this to work but it just wouldn't go either and I didn't understand how to get 3 dropdowns

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14924&sliceId=2

[Ken2k7]

I would just remove the setTimeout() function and consider the following:

1. Add a remove function that removes all dropdown options on both the second and third menus upon the call to the function setOptions.

2. Set the new Option's third optional parameter to true on the first option so it is selected for the second and third menus.

[Zergman]

Thanks for helping Ken2k7, but what you suggested went RIGHT over my head LOL.  Im not at that level to be able to tackle that on my own.

 

I've found a couple script examples that I have gotten to work, but can't edit the file properly to add new entries.

This one is the one im playing with right now.

http://www.webreference.com/dev/menus/intro3.html

 

Just seems like a lot of code for something I thought would be simple.

 

I'll keep hitting up google and hopefully land on a script that I can just copy and paste .... damn my newbish skills

[Psycho]

Look at my post in this thread

 

http://www.phpfreaks.com/forums/index.php/topic,201892.0.html

[Zergman]

Look at my post in this thread

 

http://www.phpfreaks.com/forums/index.php/topic,201892.0.html

 

Wicked WICKED stuff!!  and here's the scary part, I was able to successfully add my own entries to it!  This will do just fine.

 

I can't thank you enough for this mjdamato for your script, you don't realize what a huge relief this was.  A huge thanks to everyone else for helping as well.

 

One question though, how can I get the 3rd box to not generate a popup and just let me select the entry?

Im not sure what I have to put in the onchange.

onchange="alert(this.options[this.selectedIndex].value)"

[Zergman]

Well, I just left the onchange blank and it seems to work!

 

Not sure if thats a good practice or not, but its working!

 

oh happy day!

[Psycho]

That onchange was only there for debugging purposes.

[Zergman]

That onchange was only there for debugging purposes.

 

cool, thanks again for the help!