INTELLIGENT WORK FORUMS FOR COMPUTER PROFESSIONALS
Log In
Come Join Us!
Are you a Computer / IT professional? Join Tek-Tips Forums!
- Talk With Other Members
- Be Notified Of Responses
To Your Posts
- Keyword Search
- One-Click Access To Your
Favorite Forums
- Automated Signatures
On Your Posts
- Best Of All, It's Free!
- Students Click Here
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.
Posting Guidelines
Promoting, selling, recruiting, coursework and thesis posting is forbidden. Students Click Here
|
dynamic listboxes !
How do I create multi-level select / list / drop down boxes? by BillyRayPreachersSon
Posted: 9 May 06 (Edited 10 May 06)
|
Here is some code to enable you to create multi-level select elements.
See below for browser compatibility matrix.
The code also shows how you can customise a default option in each select element easily.
Note: There are many different ways this could be achieved... so if this method isn't right for you, don't give up. You could consider using nested arrays, objects, etc.
Note 2: If the page is for public consumption, be a considerate programmer and include a non JavaScript-based server-side alternative for when JS is disabled 
CODE<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en"> <title>Dynamic select elements</title>
<style type="text/css"> html, body, form { padding: 0px; margin: 0px; } body { margin: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; } </style>
<script type="text/javascript"> <!--
function loadSelectElement(selObjId, options) { var selObj = document.getElementById(selObjId);
// clear the target select element apart from the "select your..." option selObj.options.length = 1;
// copy options from array of [value, pair] arrays to select box // IE doesn't work if you use the DOM-standard method, however... if (typeof(window.clientInformation) != 'undefined') { // IE doesn't take the second "before" parameter... for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0])); } else { for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null); } }
function madeSelection(selObj) { var selectedValue = selObj.options[selObj.selectedIndex].value; var selectedText = selObj.options[selObj.selectedIndex].text; if (selectedValue == '--') return;
if (selObj.name == 'select01') { document.getElementById('select02Container').style.display = 'block'; document.getElementById('select02').options[0].text = 'Select the breed of your ' + selectedText.toLowerCase();
switch(selectedValue) { case 'type_cat': loadSelectElement('select02', [ ['breed_persian', 'Persian'], ['breed_tabby', 'Tabby'], ['breed_siamese', 'Siamese'] ]); return;
case 'type_dog': loadSelectElement('select02', [ ['breed_alsatian', 'Alsatian'], ['breed_springer_spaniel', 'Springer Spaniel'], ['breed_king_charles_spaniel', 'King Charles Spaniel'], ['breed_chihuahua', 'Chihuahua'], ['breed_shih_tzu', 'Shih Tzu'] ]); return;
case 'type_bird': loadSelectElement('select02', [ ['breed_parrot', 'Parrot'], ['breed_cock', 'Cock'] ]); return;
case 'type_fish': loadSelectElement('select02', [ ['breed_goldfish', 'Goldfish'] ]); return; } } // select01
if (selObj.name == 'select02') { document.getElementById('select03Container').style.display = 'block'; document.getElementById('select03').options[0].text = 'Select the colour of your ' + selectedText;
switch(selectedValue) { case 'breed_persian': case 'breed_siamese': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_grey', 'Grey'], ['colour_blue', 'Blue'] ]); return;
case 'breed_tabby': loadSelectElement('select03', [ ['colour_tabby', 'Tabby'] ]); return;
case 'breed_alsatian': case 'breed_springer_spaniel': case 'breed_king_charles_spaniel': case 'breed_chihuahua': case 'breed_shih_tzu': loadSelectElement('select03', [ ['colour_brown', 'Brown'], ['colour_white', 'White'], ['colour_golden', 'Golden'] ]); return;
case 'breed_parrot': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_yellow', 'Yellow'], ['colour_red_yellow', 'Red & Yellow'] ]); return;
case 'breed_cock': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_brown', 'Brown'] ]); return;
case 'breed_goldfish': loadSelectElement('select03', [ ['colour_orange', 'Orange'] ]); return;
} } // select02 }
//--> </script> </head>
<body> <form name="myForm"> <select name="select01" id="select01" onchange="madeSelection(this);"> <option value="--">Select your pet type</option> <option value="type_cat">Cat</option> <option value="type_dog">Dog</option> <option value="type_bird">Bird</option> <option value="type_fish">Fish</option> </select>
<div id="select02Container" style="margin-top:1em; display:none;"> <select name="select02" id="select02" onchange="madeSelection(this);"> <option value="--">Select your pet breed</option> </select> </div>
<div id="select03Container" style="margin-top:1em; display:none;"> <select name="select03" id="select03" onchange="madeSelection(this);"> <option value="--">Select your pet colour</option> </select> </div> </form> </body> </html>
This has been tested working in:
Windows IE 7 Beta 2 IE 6 IE 5.5 IE 5.0 Netscape 7.1 Fx 1.5.0.3 Opera 8.52 Opera 7.54 Opera 7.02
Mac OS X 10.4.6 Safari 2.0.3 IE 5.2.3 FX 1.0.7 Fx 1.5.0.2 Opera 7.54u1 Opera 8.02 Opera 8.54 Netscape 7.1 Camino 1.0
It is known to NOT work in Opera 6.03 for Mac OS X
It should work in most modern DOM-compliant browsers, however.
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
Dan's Page @ Code Couch http://www.codecouch.com/dan/ |
Back to Javascript FAQ Index
Back to Javascript Forum |
|
|
|