View Full Version : Chained menu with click action to display hidden divs

01-16-2013, 07:24 PM
1) Script Title: Chained menu with click action to display hidden divs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chainedmenu/index.htm

3) Describe problem: Is it possible to have 'var onclickaction' to display a hidden div ? My problem is that i have 2 items to show after selection

01-16-2013, 10:06 PM
In chainedmenu.js, replace alert(selectedOptionvalue) with document.getElementById('hidden_div').style.display='block'

Put a hidden div in chainedmenu.html, for instance:
<div id="hidden_div" style="display:none; background: red">this is a hidden div</div>

In chainedmenu.html, replace <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')"> with:
<input type="button" value="Reset" onclick="document.getElementById('hidden_div').style.display='none'; resetListGroup('chainedmenu')">

If you want the text of the hidden div to be identical to the text of the original alert, things get more complicated, but I guess that can be done too.

01-18-2013, 03:16 PM
Thank you very much
I will give this a try

By the way, i am noticing values on the dropdown do not reset even if i go to a different page and go back.
is there a way to reset values when page is being visited or revisited?


01-18-2013, 03:41 PM
You could try onload="resetListGroup('chainedmenu')" or onunload="resetListGroup('chainedmenu')"

01-18-2013, 04:57 PM
Thank you for your assistance

One last question

Can i have just 2 dropdowns instead of 3?
Do i need to change code to have it work?

Please advise

01-18-2013, 05:09 PM
What does ''savestate' do?

I have:
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'savestate')">

01-18-2013, 06:02 PM
I'm afraid you have to read the documentation in chainedmenu.html very carefully. It's all explained there.
EDIT: I realize this is difficult. I'll try to make a simpler script for you. Wait until tomorrow.

01-18-2013, 11:03 PM
OK, here (http://mesdomaines.nu/eendracht/selectbox_chained/chained.html)'s a two-level chained selectbox. It's easier to understand than the DynamicDrive script. Maybe this is what you want. Tell me if there's something wrong or missing.

01-31-2013, 04:31 PM
It works great !

One last question
What if i have my 2 dropdowns

Can i set 1 option on my first dropdown to directly go to a page without going to the second dropdown?

01-31-2013, 06:35 PM
You mean something like the following?

<!doctype html>
<html >
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

body{font-family: verdana; font-size: 12px; padding-left:20px; padding-right: 20px}

function load_script_container()
{var div_node=document.createElement('div');
div_node.setAttribute("id", "script_container");
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", load_script_container, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", load_script_container );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window.onload = load_script_container;

function javascript_in_selectbox(which_box) {
var optionValue=document.getElementById(which_box).options[document.getElementById(which_box).selectedIndex].value;
if (optionValue=="none") {}
else {
var script_inside_selectbox_option = document.createElement('script');
script_inside_selectbox_option.type = 'text/javascript';
script_inside_selectbox_option.text = optionValue;

function hide_it(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == className){



var alertmessage="The window you're about to open doesn't have buttons for 'back' and 'forward', but you can use the keyboard: \n- press the BACKSPACE button for going back in the newly opened window, \n- use SHIFT+BACKSPACE for going forward in the newly opened window."

function prompt_once_per_session()
if( !/(^|\s|;)seenAlert=yes(;|\s|$)/.test(document.cookie))
{if( !confirm(alertmessage+'\n\nClick on OK if you don`t want this message to show again.\n\nClick on CANCEL if you want this message to show each time you open a new window.') )
else {document.cookie="seenAlert=yes";}

var popUpWin ;
var url
var autoclose = true
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ;

//Don't make the popup too high/wide, as this will result in a normal new tab in Opera
var w = screen.availWidth*70/100 //width: 70%
var h = screen.availHeight*60/100 //height:60%
var l=screen.availWidth*15/100-10 //left: 15% (with a slight correction of minus 10
var t=screen.availHeight*15/100 //top: 15%

function open_it(url){
if(is_chrome)prompt_once_per_session(); // message for Google Chrome users
if (popUpWin) {popUpWin.close()}
if (popUpWin && autoclose){window.onunload=function(){popUpWin.close()}}
popUpWin=window.open(url,"","menubar=yes, toolbar=yes, titlebar=yes, directories=no, status=0, scrollbars=yes,location=yes,top="+t+",left="+l+",width="+w+",height="+h+", resizable=1");

if (typeof(popUpWin)=='undefined') {
alert("Your browser tries to open:\n\n"+unescape(url)+".\n\nThat's a safe page, but your safety settings prevent to open it. Please disable your pop-up blocker and click the link again.");

if (window.focus){popUpWin.focus() }



<body onload="hide_it('select','select');hide_it('button','select')" onunload="hide_it('select','select');hide_it('button','select')">

<div style="position: relative; text-align: center; margin-top: 20px">
<b>Surf this site</b> &rarr; <select id="first_main" onchange="javascript_in_selectbox('first_main'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Select: Webmaster Resources & News</option>
<optgroup label="Open in new menu">
<option value="hide_it('select','select');document.getElementById('button').style.display='inline'; document.getElementById('second_select').style.display='inline'">Webmaster Resources</option>
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('third_select').style.display='inline'">News Sites</option>
<optgroup label="Open directly in new window">
<option value="open_it('http://www.dynamicdrive.com')">DynamicDrive</option>

<select id="second_main" onchange="javascript_in_selectbox('second_main'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Select: Regular Cars & Sports Cars</option>
<optgroup label="Open in new menu">
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fourth_select').style.display='inline'">Regular Cars</option>
<option value="hide_it('select','select'); document.getElementById('button').style.display='inline'; document.getElementById('fifth_select').style.display='inline'">Sports Cars</option>
<optgroup label="Open directly in new window">
<option value="open_it('http://www.toyota.co.uk')">Toyota</option>
<option value="open_it('http://www.porsche.com/uk')">Porsche</option>

<select class="select" id="second_select" onchange="javascript_in_selectbox('second_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Webmaster Resources</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.dynamicdrive.com')">DynamicDrive</option>
<option value="open_it('http://www.codingforums.com')">CodingForums</option>
<option value="open_it('http://www.w3schools.com')">W3Schools</option>

<select class="select" id="third_select" onchange="javascript_in_selectbox('third_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: News Sites</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://edition.cnn.com')">CNN</option>
<option value="open_it('http://www.bbc.co.uk/news')">BBC News</option>
<option value="open_it('http://www.foxnews.com')">Fox News</option>

<select class="select" id="fourth_select" onchange="javascript_in_selectbox('fourth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Regular Cars</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.toyota.co.uk')">Toyota</option>
<option value="open_it('http://www.ford.co.uk')">Ford</option>
<option value="open_it('http://www.nissan.co.uk')">Nissan</option>

<select class="select" id="fifth_select" onchange="javascript_in_selectbox('fifth_select'); selectedIndex=0; " onfocus="selectedIndex=0" style="font-family: verdana; font-size: 12px; cursor: pointer; " >
<option selected>Selected: Sports Cars</option>
<option disabled>'Click-to-go' on an item below</option>
<option value="open_it('http://www.porsche.com/uk')">Porsche</option>
<option value="open_it('http://www.astonmartin.com')">Aston Martin</option>

<button class='select' id="button" onmousedown="hide_it('select','select');hide_it('button','select')" onmouseup="hide_it('select','select');hide_it('button','select')">Reset</button>


Rest of page



04-10-2018, 04:26 PM
This solution has been helpful - showing a hidden div. However, I'd like to be able to show a div based on the selection of the chained selection.
For example, if someone chooses list 1, 2 and 3 can I add a class to the addList options in config.js and when a user clicks go, it'll display a div based on that class / id?
At the moment the solution calls / displays the same div regardless of the selection the user makes.
Hope this makes sense and hope you can help?