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!

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


Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

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" "">
<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 ( == '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 ( == '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