4 dynamic dependent dropdown boxes

please help...i am trying to create a 4 tier dropdown box system...

[johnny25]

Hi all,

I wonder if anybody can help?

I am trying to create a JavaScript that allows 4 dropdown boxes to depend on one another. So for example:

•User selects an option from dropdown box 1

•The content of dropdown box 2 is dependent on dropdown box 1.

•The content in dropdown box 3 is dependent on dropdown box 1

•The content in dropdown box 4 is dependent on dropdown box 3 and 1.

Is there such a script that does this?

Just one more thing… I am creating this on web based software called Vyre, which uses the J2EE platform. Therefore I am using data stores as opposed to a database such as access. If there are any vyre experts out there please help.

Thanks.

[MichaelBluejay]

I doubt there's something off the shelf that does exactly what you want, and if there were it would likely be horribly bloated.

You can code it yourself but I think you need to just get more proficient with JavaScript in general in order to do so. We can give you some pointers here but it would soon become tedious because of the magnitude of what you're asking. It's like a novice asking, "How do I write a song?"

To get you started, I'm thinking your project will go along these lines. Say the items in your first dropdown menu are <LI>'s. You'll have JavaScript make a call to a function when any is chosen:

<li onclick="chooseMenuItem(1,1)">apple</li>
<li onclick="chooseMenuItem(1,2)">orange</li>
<li onclick="chooseMenuItem(1,3)">banana</li>

Your function to record what's selected would look something like this:

function chooseMenuItem(whichMenu,whichItem) {
window.theMenu[whichMenu] = whichItem;
}

Then when you pull down the second menu, it will choose which content to show based on the value of window.theMenu[1].

Good luck.

[johnny25]

thanks for that MichaelBluejay, but I am quiet a novice at Javascripting. I am not sure where to insert the code you just gave me. If you take a look at the code below, which was done by a vyre developer. It represents 2 dropdown boxes, where the second one depends on the first one ie phone manufacturer and phone model. This code was inserted as a custom code into vyre.

<script type="text/javascript">
// Create a manufacturere/model array in memory
var selectMaster = document.getElementById("SEARCH_ATTRIBUTE_10");
var selectClient = document.getElementById("SEARCH_ATTRIBUTE_11");

var manufArray = new Array();
for ( var i = 0; i < selectMaster.length; i++ ) {
var manu = selectMaster.options[i].value;
var modelArray = new Array();
for ( var o = 0; o < selectClient.length; o++) {
if (selectClient.options[o].value.indexOf(manu + "¦")!= -1) {
modelArray.push(selectClient.options[o]);
}
// Add to all sub select options without a prefix
if (selectClient.options[o].value.indexOf("¦") == -1) {
modelArray.push(selectClient.options[o]);
}
}
manufArray.push(new Array(manu, modelArray));
}

selectMaster.onchange = function() {
selectClients(this.options[this.selectedIndex].value);
};

function selectClients(manufacturer) {
selectClient.length=0;
for ( var i = 0; i < manufArray.length; i++ ) {
manuf = manufArray[i];
if ( manuf[0] == manufacturer ) {
for ( var o = 0; o < manuf[1].length; o++ ) {
selectClient.options[o] = manuf[1][o];
}
}
}
}

// Set models for page load
selectClients(selectMaster.options[selectMaster.selectedIndex].value);

</script>

Does the above make any sense? It searches the attributes (held in data stores) and not the database. i need to know what to add to the script so it allows the user to:

1. select product name (e.g bluetooth dongle)
2. select sofware version (dependent on 1.)
3. select phone make (dependent on 1.)
4. select phone model (dependent on 3 and 1)

Thanks.

[MichaelBluejay]

You said:

I am quiet a novice at Javascripting. I am not sure where to insert the code you just gave me.

ignoring that I said:

You can code it yourself but I think you need to just get more proficient with JavaScript in general in order to do so. We can give you some pointers here but it would soon become tedious because of the magnitude of what you're asking. It's like a novice asking, "How do I write a song?"

More specifically, you dont "insert" the code I gave you; what I gave you is a starting point for how to code it yourself, which is what I think you need to learn how to do -- unless you want to hire a programmer. What you're asking for is not trivial. It would probably take me less time to code a solution from scratch myself than to try to decipher the code you posted and patch it, although I'm not inclined to do either. Likely no one else is either since they haven't posted here.

I suggest picking up the O'Reilly Javascript book or working through some online tutorials. When you get stuck about a specific piece you can post again here. Posts about big projects get helpful but only general replies, while posts that are about a specific piece get more specific replies.

By the way, I've never heard of Vyre, but I don't think it has anything to do with what you're trying to accomplish.