[+Jscript] 3faches voneinander abhängiges Dropdown Menü

**Angelmaker** · 02.03.2009 17:21

Der Javascript Teil ist gnadenlos von Malleus geklaut - danke dafür nochmal an Malleus für die hervorragend und leicht verständlich aufgebaute Seite. *huld*

Originalcode:
http://www.malleus.de/FAQ/createDepe...tOptions3.html

Darauf aufbauend habe ich ein Scriptchen gebastelt, welches dieses Dropdown Menü aus einer Datenbank mit Werten befüllt. Das Script ist dafür gedacht in verschiedenen Standorten, Substandorten daraus die dort stehenden Devices anzuzeigen.

Wir beginnen mit einer Session.

PHP-Code:


session_start(); // Am Beginn der Seite, noch bevor etwas geschickt wird.

In einer zentralen Datei binden wir nun also die Werte ein. Das könnte z.B. die Settings.php sein oder so.

PHP-Code:


// Das ganze basiert auf Oracle, kann natürlich jederzeit für MySQL

// oder sonstwas getippselt werden.

// Die Query natürlich beliebig kompliziert machen

$statement=<<<eof

SELECT DISTINCT -- all KNOWN msc, co, devices

Wert1 as MSC, Wert2 as CO, Wert3 as DEVICE

from Tabelle xyz

where 1=1

eof;



$query=oci_parse($db_oracle,$statement);

$result=oci_execute($query);

    

    while($row=oci_fetch_assoc($query)) // Fetching associative results ( MSC, CO, DEVICE )

    {

        $_SESSION['DATA'][$row['MSC']][$row['CO']][]=$row['DEVICE']; // fortlaufendes named/named/numerisches Array

        $_SESSION['DEVICES'].='"'.$row['DEVICE'].'":"'.$row['DEVICE'].'",'; // Jscript Daten in der Form, wie Malleus Script es erwartet.

    }

In diesem ersten Session basierten Teil fetchen wir ALLE Rohdaten ( in diesem Fall MSC, CO, DEVICE ) als named array sowie zusätzlich schonmal die komplett für Malleus Script vorgebaute Enddaten für alle Devices.

Da das script per Funktion initpage() gestartet werden will, brauchen wir also eine Weiche, z.B. per Get. Get läßt sich ja auch wunderschön im Formularhandler übergeben.

PHP-Code:


if (isset($_GET['menu']))

{

    if ($_GET['menu']=='open')

    echo '<body onload="initPage()">';

} else echo '<body>';

Nun brauchen wir alle Daten für das Javascript in der Header Datei - also die Daten im

HTML-Code:

<head></head>

zur Verfügung stellen.

Der gesamte Head Teil ( inklusive Malleus Script ) muss dann also so aussehen. Da wir natürlich viel mit HTML hier arbeiten um das Javascript immer wieder einzubinden, sieht das ganze natürlich ordentlich flickig aus.

Der "Buildblock" ist reichlich massiv und unverdaulich, sollte aber mit gutem Wissen um Arrays zu verstehen sein. Verzeiht das Kauederwelsch Englisch dazwischen durch - wenn man viel in der PHP.net Doku stöbert, dann ist das teilweise schwer die Inline Dokumentation verständlich zu halten

PHP-Code:


<? 

if ($_GET['menu']=='open')

{

    // Fetching MSC/CO Data -> settings.php - Devices are imported into the session



    echo '

    <script language="JavaScript" type="text/javascript">

    var options4Type = [ {},



    { // Options für zweite Selectbox

    ';

    

    $array_keys_msc=array_keys($_SESSION['DATA']);

    

    for ($i=0;$i<sizeof($array_keys_msc);$i++)

    {

        $array_keys_co[]=array_keys($_SESSION['DATA'][$array_keys_msc[$i]]);

    }

    /***********************************************************

    

    This is the javascript buildblock

    

    output is a list of ALL co´s

    output 2 is a list of which CO belongs to what MSC

    output 3 is a list of which Device belongs to what CO

    output 4 is the <option value="msc">msc</option>

    

    ***********************************************************/    

    $size_of_msc_array_keys=sizeof($array_keys_msc);

    for ($i=0;$i<$size_of_msc_array_keys;$i++) // "Äußeres Array" == MSC Daten

    {

        $output2.='"'.$array_keys_msc[$i].'" : "'; // Adding the MSC part for the MSC->CO dependency

        $size_of_co_array_keys=sizeof($array_keys_co[$i]); // Größe des jeweiligen inneren Arrays 

        for ($o=0;$o<$size_of_co_array_keys;$o++) // inneres array == Co Daten

        {

            $output.='"'.$array_keys_co[$i][$o].'":"'.$array_keys_co[$i][$o].'",';

            $output2.=$array_keys_co[$i][$o].','; // Adding all COs for the respective MSC for the MSC-> CO dependency

            $output3.='"'.$array_keys_co[$i][$o].'":"'; // Adding the CO part for the CO->device dependency

            

            $size_of_device_array_key=sizeof($_SESSION['DATA'][$array_keys_msc[$i]][$array_keys_co[$i][$o]]); // size of each CO - device list.

            

            for ($b=0;$b<$size_of_device_array_key;$b++) //  inneres inneres array, device daten

            {

                $output3.=$_SESSION['DATA'][$array_keys_msc[$i]][$array_keys_co[$i][$o]][$b].',';

            }

            $output3=substr($output3,0,-1);

            $output3.='",';

        }

        $output2=substr($output2,0,-1); //cutting the trailing comma from the CO list

        $output2.='",'; // closing CO List and trailing a comma to seperate the MSC

        $output4.='<option value="'.$array_keys_msc[$i].'">'.$array_keys_msc[$i].'</option>';

    }

    echo substr($output,0,-1); // cutting the last comma, don´t need it

    

    echo '

    },



    { // Options für dritte Selectbox

    ';

    

    echo substr($_SESSION['DEVICES'],0,-1); //trimming the last comma from the device list for Javascript

    

    echo '

    }



    ];



    var dependentOptions = [ { },



    { // Einschränkung der zweiten Selectbox:

    

    ';

    

    echo substr($output2,0,-1); // cutting the last comma, don´t need it from the build topside



    echo '

    },



    { // Einschränkung der dritten Selectbox

    

    ';

    

    echo substr($output3,0,-1); // cutting the last comma, don´t need it from the build topside

    echo '

    }



    ];





    function initPage()

    {

        oMyTypes = [ 

                        document.getElementById( "myType1" ), 

                        document.getElementById( "myType2" ), 

                        document.getElementById( "myType3" ) 

                    ];



        for ( var i = 1; i < oMyTypes.length; i++ )

           for ( var code in dependentOptions[ i ] )

            dependentOptions[ i ][code] = dependentOptions[ i ][ code ].split( "," );

        

        createOptions( 1 );

        createOptions( 2 );

    };



    function createOptions( toggleMode )

    {

        var oSelect= oMyTypes[ toggleMode ],

        value = oMyTypes[ toggleMode - 1 ].value;

        

        oSelect.options.length = 0;

        

        for (var i = 0;i < dependentOptions[ toggleMode ][ value ].length; i++ )

        {

            var code = dependentOptions[ toggleMode ][ value ][ i ];

            oSelect.options[ i ] = new Option( options4Type[ toggleMode ][ code ], code )

        }

    }

    </script>

    ';

}

Jetzt fehlt natürlich nur noch der Formular Teil.

PHP-Code:




<tr>

<td><select id="myType1" onchange="createOptions( 1 );createOptions( 2 )" name="msc">

<?php echo $output4; // Trigger the select menu - this is built in "head.php" ?>

</select>&nbsp;</td>

<td><select id="myType2" onchange="createOptions( 2 )" name="co"><option></option></select>&nbsp;

</td>

<td>

<select id="myType3" name="device"><option></option></select>

</td>

</tr>

et voila - $output4 startet die Angabe der Formulare, der Rest wird vom Javascript besorgt, das sich die Daten aus dem Header-Teil der Seite zieht.

So, ich hoffe, es konnten ein paar Leute was damit anfangen - das Ding ist ja reichlich massiv und nicht grad anfängerfreundlich. Je nachdem, welche Werte man aus der Datenbank selektiert kann man natürlich jede Abhängigkeit voneinander darstellen, auch wenn man dann der Übersichtlichkeit halber die Namen der Variablen anpassen sollte.

Mit den besten Wünschen,
Angelmaker

PS: Ich bin mir nun nicht sicher, ob das Code-Schnippsel Forum nicht besser gewesen wäre. Ich möchte ja nicht das Board zumüllen. :] Rein theoretisch könnte man sogar den ganzen Scriptdatenteil in der Session zusammenkleben, wenn sich die Daten nicht ändern - würde auf jeden Fall Ressourcen schonen, zumindest auf der Datenbank... Hmm, muss ich wohl nochmal überarbeiten. Flickwerk, Flickwerk...

zur Startseite vom TP

Thema: [+Jscript] 3faches voneinander abhängiges Dropdown Menü

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

[+Jscript] 3faches voneinander abhängiges Dropdown Menü

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

DropDown Menü

Dropdown-Menü

dropdown menü

dropdown menü

DropDown Menü

Berechtigungen