JavaScript+PHP-Anwendung 1: Dynamische Implementierung von doppelten Dropdown-Menüs in der Webseitenproduktion

Bei der Webseitenproduktion kommt es häufig vor, dass durch die Auswahl des Haupt-Dropdown-Menüs dynamisch ein Unter-Dropdown-Menü generiert wird. Beispiel: Im Hauptmenü gibt es drei Optionen: „Focus News“, „Lifestyle“ und „Mood Stories“. Durch Auswahl von „Focus News“ werden automatisch Untermenüs wie „Inland“, „International“ und „Sport“ generiert ", "Unterhaltung" und so weiter.

Mit Javascript können wir die oben genannten Effekte problemlos erzielen. Das Problem besteht jedoch darin, dass die Implementierung nicht einfach ist, wenn die Optionen im Menü dynamisch aus einer Datenbank (oder einer anderen Datei) extrahiert werden. Basierend auf meiner eigenen praktischen Erfahrung stellt Ihnen der Autor eine Implementierungsmethode mit Javascript + PHP vor. Die Datenbank in diesem Artikel verwendet MySQL. In diesem Beispiel stellt der Autor auch vor, wie man nach jeder Formularübermittlung zum vorherigen Auswahlstatus der Menüoption zurückkehrt.

Die im Artikel vorgestellte Funktion von PHP besteht darin, Menüoptionen aus der Datenbank zu extrahieren, und die andere Funktion besteht darin, Javascript-Code zu generieren. Leser können ihre eigene vertraute interpretierte Sprache verwenden, z. B. asp.

Um den Code zu vereinfachen, geht der Autor davon aus, dass das Hauptmenü über HTML erstellt wurde. Da das Untermenü ein dynamisches Design erfordert, wird nur der Grundrahmen wie folgt gezeichnet:

//Hauptmenüdesign

Focus News

Lifestyle

Mood Story /value muss mit dem folgenden Menüarray übereinstimmen

/select>

Was wir berücksichtigen müssen, ist, welche Schritte für das onchange()-Ereignis des Menüs ausgeführt werden müssen. Der allgemeine Prozess besteht darin, Untermenüelemente basierend auf den Hauptmenüoptionen zu erstellen. Am besten legen Sie den Eintragstext des Untermenüs vorab fest. Basierend auf dieser Idee verwendet der Autor ein gemeinsames Array in JavaScript, um die Untermenüoptionen aufzuzeichnen, und es wird beim Laden automatisch von PHP generiert. Daher hat der Autor die folgende Javascript-Funktion setmenu() entworfen:

function setmenu(){

menu=array("a","b","c" // Construct das Menü assoziatives Array


$db = new my_db();

$db->database = "** * "; // Erstellen Sie eine neue MySQL-Verbindung, hier wird PHPLib verwendet

$mmenu = array("a","b","c"); //Der Autor hat es hier vereinfacht

for ($i=0;$i
$id = $mmenu[$i];

$db-> query( "select menu from class where menuid ='".$id."'");

//Angenommen, die Menüoptionen sind im Menüfeld der Klassentabelle gespeichert und die Menü-ID wird verwendet um das Menü zu identifizieren

while ($db->next_record()){

$smenu[] = "".$db->f("menu")." "";

}

if (isset($smenu) && is_array($smenu)){

$str = implode(",",$smenu);

echo "menu[" $id"] =array($str);ntt";

//Füllen Sie das Menü-Union-Array ab

unset($ smenu); //Löschen Sie die Smenu-Variable

}

}

?> //Beenden Sie das PHP-Programm

mit (Dokument) {

id=all("mmenu").value ; //Den Wert des Hauptmenüs abrufen

arr_menu=menu[id]; "smenu").options.length;i>=0;i- -){

all("smenu").options.remove(i); //Originalelemente müssen gelöscht werden

}

if (arr_menu.length= =0){

return

}

for(i=0;i
obj=createelement( "option");

obj.text=arr_class[i];

all("smenu").options. add(obj);

}

}

}

Auf diese Weise wird der PHP-Teil jedes Mal, wenn das Dokument angezeigt wird, als Javascript-Sprache interpretiert , und wenn auf das Hauptmenü geklickt wird, wird das Untermenü automatisch aktualisiert. Aus dem gleichen Grund können Leser auf der Grundlage dieser Idee komplexere Mehrfachmenüoptionen erstellen.

Abschließend stellt der Autor kurz vor, wie der letzte Status des Menüpunkts nach dem Absenden des Formulars beibehalten werden kann. Es gibt tatsächlich viele Techniken, aber der Autor verwendet die Methode der impliziten Variablen. Fügen Sie dem Formular den folgenden Code hinzu:





Wir müssen nur jeder impliziten Variablen im onsubmit()-Ereignis des Formulars einen Wert zuweisen. Das heißt:

document.all("h1").value=document.all("mmenu").selectedindex

document.all("h2").value=document.all("smenu").selectedindex;

Um implizite Variablen zu verwenden, verwenden wir im onload()-Ereignis des Dokumentkörpers die php Methode (Andere Methoden können ebenfalls verwendet werden), um die Anzeige des Menüs zu steuern:


if (!isset($h1)){ //Es muss nur $ beurteilt werden h1

$h1 = 0;

$h2 = 0;

}

echo "document.all("mmenu").selectedindex=" .$h1.";ntt ";

echo "document.all("mmenu").click();ntt"

echo "document.all("mmenu"). selectedindex=".$h1. ";ntt";

echo "document.all("smenu").selectedindex=".$h2;

?>

An diesem Punkt haben wir eine doppelte dynamische Implementierung des Dropdown-Menüs erreicht.