Trigger Head action group from popup menu

Velcrobelly · 12-29-2005, 02:16 PM

Hi everyone,
I'm new to the forum and Javascript itself, so apologies for any stupidity.
I am in the planning stages of a website and am researching the best methods to implement certain features.

What I need advice with is whether it is possible to trigger action groups (set to onCall) placed in the Head section of an html page based on user selection from two popup menus. I'm using Adobe GoLive CS by the way.

This particular page will feature 200+ div layers, each of whch need to have their visibility switched using a Show/Hide action depending on the user selection from two popup menus.

The first menu would have three options: City1; City2; City3.
While the second menu would have genre options such as: Art; Film; Exhibition etc. What I would like to achieve is a system where a user selects from either of the popup menus, hits a Submit button and that triggers an appropriate Action Group altering the visibility of select Div layers.

For example, choosing City1 and pressing Submit triggers the City1 action group hiding all designated Divs, while choosing City2 and Art triggers another action group to hide all Divs except those designated.

In short, is it possible to trigger Action Groups (set to onCall) based on the user selection from two popup menus? If it is possible can you clue me in as to where would be a good place to start learning the code/techniques required? I've not had much sucess so far with various Google searches on the subject.

Thanks for your patience and apologies for the long post.

konithomimo · 12-29-2005, 04:08 PM

You could give every div a class and then make the values of your drop down the same as the class names. Then just use a function to show/hide the appropriate divs.

Code:

<html>
<head>
<script type="text/javascript">
function showHide(myclass)
{
var mydivs = document.getElementsByTagName('div');
var i;

for(i=0;i<mydivs.length;i++)
{
if(mydivs[i].className==myclass)
{
mydivs[i].style.display='block';
}
else
{
mydivs[i].style.display='none';
}
}
}
</script>
</head>
<body>
<form>
<select onchange="showHide(this.options[this.selectedIndex].value)">
<option value="first">First group
<option value="second">Second group
<option value="third">Third group
</select>
</form>
<div class="first" style="display:none">
This is part of the first group.
</div>
<div class="second" style="display:none">
This is part of the second group.
</div>
<div class="third" style="display:none">
This is part of the third group.
</div>
<div class="first" style="display:none">
This is also part of the first group.
</div>
</body>
</html>

Velcrobelly · 12-29-2005, 04:52 PM

Thanks konithomimo,

Can you recommend any sites where I could figure out what that all means? Like I mentioned in my first post, i'm new to Javascript...well writing my own anyway.

Nischumacher · 12-29-2005, 05:01 PM

take a look at W3 Schools.