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 winky smile


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <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;

    <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']

                    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']

                    case 'type_bird':
                        loadSelectElement('select02', [
                            ['breed_parrot', 'Parrot'],
                            ['breed_cock', 'Cock']

                    case 'type_fish':
                        loadSelectElement('select02', [
                            ['breed_goldfish', 'Goldfish']
            } // 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']

                    case 'breed_tabby':
                        loadSelectElement('select03', [
                            ['colour_tabby', 'Tabby']

                    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']

                    case 'breed_parrot':
                        loadSelectElement('select03', [
                            ['colour_white', 'White'],
                            ['colour_yellow', 'Yellow'],
                            ['colour_red_yellow', 'Red & Yellow']

                    case 'breed_cock':
                        loadSelectElement('select03', [
                            ['colour_white', 'White'],
                            ['colour_brown', 'Brown']

                    case 'breed_goldfish':
                        loadSelectElement('select03', [
                            ['colour_orange', 'Orange']

            } // select02


    <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>

        <div id="select02Container" style="margin-top:1em; display:none;">
            <select name="select02" id="select02" onchange="madeSelection(this);">
                <option value="--">Select your pet breed</option>

        <div id="select03Container" style="margin-top:1em; display:none;">
            <select name="select03" id="select03" onchange="madeSelection(this);">
                <option value="--">Select your pet colour</option>

This has been tested working in:

IE 7 Beta 2
IE 6
IE 5.5
IE 5.0
Netscape 7.1
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
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.


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close