Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • 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!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Donate Today!

Do you enjoy these
technical forums?
Donate Today! Click Here

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

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

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