[Moo] Nested select with moootols

Angel Guzman Maeso Wed, 01 Jul 2009 15:35:52 -0700

Hi, I am programming some code with nested select with mootools. You know, a
select that call other select, and these select call to other select, etc.


My code have a lot of nested level of select (four or five). I made a
example with two levels[see 1], but it is hardcode. The example for 5 levels
is a crazyness.
I need make a generic call with mootools for nested select. How to make with
mootools? [You can see the php and js code below]

[1] http://www.apogeus.es/ao/nestedsel.php

<?
$see = isset($_REQUEST['see'])?$_REQUEST['see']:0;
if($see)
{
    $l = isset($_REQUEST['l'])?$_REQUEST['l']:0;
    $c = isset($_REQUEST['c'])?$_REQUEST['c']:0;

    if(empty($c))
    {
        switch($l)
        {
            case '1': # Letter A
                echo '
                    <select id="color">
                        <option value="00" selected="selected">Choose
color</option>
                        <option value="01">Aqua</option>
                        <option value="02">Aquamarine</option>
                        <option value="03">Amber</option>
                    </select>';
            break;
            case '2': # Letter B
                echo '
                    <select id="color">
                        <option value="00" selected="selected">Choose
color</option>
                        <option value="01">Beige</option>
                        <option value="02">Black</option>
                        <option value="03">Blue</option>
                    </select>';
            break;
        }
    }
    else
    {
        switch($l)
        {
            case '1': # Letter A
                switch($c)
                {
                    case '01': # Aqua
                        echo 'Show cool img of color Aqua';
                    break;
                    case '02': # Aquamarine
                        echo 'Show cool img of color Aquamarine';
                    break;
                    case '03': # Amber
                        echo 'Show cool img of color Amber';
                    break;
                }
            break;
            case '2': # # Letter B
                switch($c)
                {
                    case '01': # Beige
                        echo 'Show cool img of color Beige';
                    break;
                    case '02': # Black
                        echo 'Show cool img of color Black';
                    break;
                    case '03': # Blue
                        echo 'Show cool img of color Blue';
                    break;
                }
            break;
        }
    }
}
else
{
?>
<html>
<head>
    <script type="text/javascript" src="js/mt123.js"/></script>
    <script type="text/javascript" />
        window.addEvent('domready',function()
        {
            $('letter').addEvent('change',function(ev)
            {
                ev.stop()
                console.log("letter select load")
                $('scolor').empty();
                $('coolmsg').empty();

                new Request.HTML(
                {
                    url: 'nestedsel.php',

data:{see:1,l:$('letter').options[$('letter').options.selectedIndex].get('value')},
                    evalScripts:true,evalResponse:true,
                    onSuccess: function(html)
                    {
                        $('scolor').empty();
                        $('scolor').adopt(html);
                        $('color').addEvent('change',function(ev)
                        {
                            ev.stop()
                            console.log("color select load")

                            new Request.HTML(
                            {
                                url: 'nestedsel.php',
                                data:
                                {
                                    see:1,

l:$('letter').options[$('letter').options.selectedIndex].get('value'),

c:$('color').options[$('color').options.selectedIndex].get('value')
                                },
                                evalScripts:true,evalResponse:true,
                                onSuccess: function(html)
                                {
                                    $('coolmsg').empty();
                                    $('coolmsg').adopt(html);
                                }
                            }).send()
                        })
                    }
                }).send()
            })
        })
    </script>
</head>
<body>
    <select id="letter">
        <option selected="selected" value="0">Choose letter</option>
        <option value="1">Letter A</option>
        <option value="2">Letter B</option>
    </select>
    <div id="scolor"></div>
    <div id="coolmsg"></div>
</body>
</html>
<? } ?>
-- 
Blog: www.shakaran.es

[Moo] Nested select with moootols

Reply via email to