igkhe's blog

Calendar

« Mei 2012
Sen Sel Rab Kam Jum Sab Min

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Today

« Mei 2012
Sen	Sel	Rab	Kam	Jum	Sab	Min
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Today

Referers

direct

Feeds

Navigation

Dynamic Select Elements

Des. 25, 2010

Posted by Laila Ike Latifah under General
0 Comments | Permalink

Lama nih nggak nge blog :)
Hari baru, dapet ilmu baru juga kawan.
Kali ini aku mau sharing tentang ini nih !!

Dynamic select elements

Sourcecode nya kayak gini :

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

Semoga bermanfaat :D

« About CSS | Main | Berbagi Cerita dan... »

igkhe's blog

ikke

Calendar

Links

Referers

Feeds

Navigation

Dynamic Select Elements

Des. 25, 2010

igkhe's blog

ikke

Search

Calendar

Links

Referers

Feeds

Navigation

Dynamic Select Elements

Des. 25, 2010