Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

Das in diesem Beispiel entwickelte kaskadierende Dropdown-Menü ist ein DOM-Element, das auf Grundlage vorhandener JSON-Daten erstellt wurde. Nach dem Klicken auf das Textfeld wird ein Menü der ersten Ebene angezeigt. Wenn ein Menü Untermenüs enthält, wird dies durch einen Pfeil rechts neben dem Menü angezeigt. Nach dem Anklicken des Menüs wird das Menü der nächsten Ebene angezeigt usw. Wenn sich unter dem Menü kein Untermenü befindet, wird es nach Auswahl des Menüs im Textfeld angezeigt.

Der Effekt des kaskadierenden Menüs nach dem Öffnen ist wie in der Abbildung dargestellt:

Mit dem im Beispiel verpackten Plugin wird lediglich ein Input-Element benötigt, um durch das Plugin automatisch ein kaskadierendes Dropdown-Menü generieren zu lassen. Der HTML-Code lautet wie folgt:

 <div Stil="margin-top:100px;text-align:center;">
  <Eingabetyp="Text" ID="Eingabe">
 </div>

Sehen wir uns als Nächstes an, wie der spezifische gekapselte JS-Code implementiert wird.

1. Deklarieren Sie den Konstruktor des kaskadierenden Menüs

Der Konstruktor muss zwei Parameter übergeben: ein Textfeldelement und mit dem Menü verknüpfte Daten.

 //elem ist ein Textfeld, data sind menübezogene Daten Funktion CascadeMenu(elem,data){

 }

2. Erstellen Sie im Konstruktor kaskadierende Menüelemente und platzieren Sie diese auf der Seite. Der spezifische Code lautet wie folgt:

Funktion CascadeMenu(Element,Daten){
  //Textfeld abrufen this.eInput = elem;
  //Textfeld auf schreibgeschützt setzen this.eInput.setAttribute('readonly',true);
  //Textfeld-Eingabeaufforderung festlegen this.eInput.placeholder = 'Bitte auswählen';
  //Holen Sie sich das übergeordnete Element des Textfelds var eInputParent = this.eInput.parentNode;
  //Erstellen Sie einen kaskadierenden Menücontainer this.eCascade = document.createElement('div');
  this.eCascade.className = "Kaskadencontainer";
  //Einen Dropdown-Listencontainer erstellen this.eCascadeInto = document.createElement('div');
  this.eCascadeInto.className = "cascade_into";
  //Der Dropdown-Listencontainer ist standardmäßig ausgeblendet. this.eCascadeInto.style.display = 'none';
  //Jedes Element in die Seite einfügen this.eCascade.appendChild(this.eInput);
  dies.eCascade.appendChild(dies.eCascadeInto);
  eInputParent.appendChild(diese.eCascade);
  //Menüdaten abrufen this.aData = data;
  //Die ausgewählten Menüdaten aufzeichnen this.aSelected = [];
  //Menü geöffnet, Standard ist „false“, bedeutet ausgeblendet this.bShow = false;
 }

3. Binden Sie Klickereignisse an Textfelder, um kaskadierende Dropdown-Menüs zu generieren

Nachdem Sie nun alle erforderlichen Elemente auf der Seite platziert haben, können Sie die kaskadierenden Menüelemente durch Klicken auf das Textfeld ein- und ausblenden.
Beim Anzeigen eines kaskadierenden Menüelements sollte das kaskadierende Dropdown-Menü durch Daten generiert werden.
Da jeder Klick generiert werden muss, können Sie dem Prototyp des Konstruktors eine Methode hinzufügen. Wie unten dargestellt:

Funktion CascadeMenu(Element,Daten){
  /*…*/

  this.eInput.addEventListener('klicken',()=>{
   //Beurteilen Sie den Status der Menüöffnung, wenn (this.bShow) { 
    //Wenn es geöffnet ist, verstecke das Menü this.eCascadeInto.style.display = 'none';
    //Den Menüöffnungsstatus ändern this.bShow = false;
   }anders{
    //Kaskadierende Menüelemente anzeigen this.eCascadeInto.style.display = 'none';
    //Ausgewählte Menüdaten speichern this.aSelected = this.eInput.value.split('>');
    //Kaskadierendes Menü generieren this.generateMenu();
   }
  });
 }
 //Kaskadierendes Menü basierend auf Daten generierenCascadeMenu.prototype.generateMenu = function(){
  //Wenn Sie das Instanzobjekt in fnCreatHTML aufrufen, müssen Sie eine Variable deklarieren, die darauf zeigt
  var _self = dies;
  //Da wir nicht sicher sind, wie viele Untermenügruppen es gibt, müssen wir eine Funktion deklarieren, die rekursiv aufgerufen wird //data: eingehende Daten, step: aktuelle Ebene function fnCreatHTML(data,step){
   //Wird zum Speichern von Untermenüdaten verwendet var aChildArr = null;
   //Menü generieren DOM-String var sHTML = '<ul>';
   //Datenschleife für (let i=0;i<data.length;i++){
    //Beurteilen Sie, ob ein Untermenü vorhanden ist, und fügen Sie die untergeordnete Klasse hinzu, um den Pfeil auf der rechten Seite des Menüs anzuzeigen, if (data[i].child) { 
     //Beurteilen Sie, ob es sich um die aktuelle Auswahl handelt. Wenn ja, fügen Sie die aktuelle Klasse hinzu und speichern Sie die Untermenüdaten if(data[i].name==this.aSelected[step]){
      aChildArr = Daten[i].Kind;
      sHTML += '<li class="child cur" data-po="'+step+'">';
     }anders{
      sHTML += '<li Klasse="Kind" data-po="'+step+'">';
     }
    }anders{ 
     //Wenn kein Untermenü vorhanden ist, füge es direkt zur Menüliste hinzu sHTML += data[i].name == this.aSelected[step]?
                  '<li class="cur" data-po="'+step+'">':
                  '<li data-po="'+schritt+'">';
    }
    //Menünamen hinzufügen sHTML += data[i].name;
    //Das aktuelle Menü beenden sHTML += '</li>';
   }
   sHTML += '</ul>';
   //Wenn mehrere Menüs ausgewählt sind, rufen Sie die Funktion rekursiv auf, um Untermenüs zu generieren, if(this.aSelected.length>step+1){
    sHTML += fnCreateHTML(aChildArr,Schritt+1);
   }
   sHTML zurückgeben;
  }
  this.eCascadeInto.innerHTML = fnCreatHTML(this.aData,0);
 }

4. Binden Sie Ereignisse an das Menü, um das Menü auszuwählen

Es gibt zwei Arten von kaskadierenden Menüs: eines mit einem Untermenü, das beim Anklicken angezeigt wird;
Ein Typ hat keine Untermenüs. Beim Klicken wird das Menü direkt ausgewählt und das ausgewählte Menü wird im Textfeld nach Ebenen angezeigt. Der Code sieht folgendermaßen aus:

Funktion CascadeMenu(Element,Daten){
  /*…*/

  //Verwenden Sie die Ereignisdelegierung, um das Menü auszuwählen this.eCascadeInto.addEventListener('click',(event)=>{
   //Menü abrufen var eTarget = event.target;
   //Ausgewählte Ebene abrufen var po = +eTarget.dataset.po;
   //Daten nach der aktuellen Auswahlebene löschen this.aSelected.splice(po+1,this.aSelected.length-(po+1));
   //Die aktuell ausgewählten Daten ändern this.aSelected[po] = eTarget.innerHTML;
   //Beurteilen, ob ein Untermenü vorhanden ist if(eTarget.className.indexOf('child')==-1){ //Wenn kein Untermenü vorhanden ist, direkt auswählen this.eInput.value = this.aSelected.join('>');
    this.eCascadeInto.style.display = "keine";
    dies.bShow = falsch;
   }else{ //Wenn ein Untermenü vorhanden ist, zeige die nächste Ebene an. //Generiere das DOM-Element neu und füge dem Array einen leeren String hinzu, um die nächste Ebene anzuzeigen. this.aSelected.push('')
    //Das kaskadierende Menü neu generieren this.generateMenu();
   }  
  });
 }

5. Blenden Sie das Menü aus, wenn Sie auf einen leeren Bereich der Seite klicken

Jetzt können Sie das Menü nur noch durch Klicken auf das Textfeld ein- und ausblenden. Im Allgemeinen wird erwartet, dass jedes geöffnete Popup-Fenster außerhalb des Popup-Fensters geschlossen wird. Hierzu muss die Klickereignisfunktion im Textfeld geändert werden: Binden Sie beim Öffnen des Menüs das Klickereignis an das Dokumentelement, um das Menü zu schließen. Brechen Sie beim Ausblenden des Menüs das an das Dokument gebundene Klickereignis ab. Wie unten dargestellt:

Funktion CascadeMenu(Element,Daten){
  /*…*/

  this.eInput.addEventListener('klicken',()=>{
   //Beurteilen Sie den Status der Menüöffnung, wenn (this.bShow) { 
    //Wenn es geöffnet ist, verstecke das Menü this.eCascadeInto.style.display = 'none';
    //Den Menüöffnungsstatus ändern this.bShow = false;
    //Das Ereignis im Dokument abbrechen document.onclick = null;
   }anders{
    //Kaskadierende Menüelemente anzeigen this.eCascadeInto.style.display = 'none';
    //Ausgewählte Menüdaten speichern this.aSelected = this.eInput.value.split('>');
    //Kaskadierendes Menü generieren this.generateMenu();
    dokument.onclick = () => {
     //Menü ausblenden this.eCascadeInto.style.display = 'none';
     //Den Menüöffnungsstatus ändern this.bShow = false;
     //Das Ereignis im Dokument abbrechen document.onclick = null;
    }
   }
  });
  //Blubbern verhindern this.eCascade.addEventListener('click',(event)=>{
   event.stopPropagation();
  });

  /*…*/
 }

6. Bereiten Sie abschließend die Daten vor, rufen Sie den Konstruktor auf und generieren Sie ein kaskadierendes Dropdown-Menü wie unten gezeigt:

var json = [
  {
   "name":"Name","id":"110000","child":[
    {"name":"Stadtteil","id":"110100","child":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"name":"Name","id":"110000","child":null}
   ]
  },
  {
   "Name": "Provinz Hebei", "ID": "130000", "Kind": [
    {"Name":"Stadt Shijiazhuang","ID":"130100","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"Name":"Stadt Tangshan","ID":"130200","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"Name":"Stadt Qinhuangdao","ID":"130300","Kind":[
     {"name":"Stadtbezirk","id":"130301","child":null},{"name":"Bezirk Haigang","id":"130302","child":null},{"name":"Bezirk Shanhaiguan","id":"130303","child":null},{"name":"Bezirk Beidaihe","id":"130304","child":null},{"name":"Bezirk Funing","id":"130306","child":null},{"name":"Autonomer Kreis Qinglong der Mandschu","id":"130321","child":null},{"name":"Kreis Changli","id":"130322","child":null},{"name":"Kreis Lulong","id":"130324","child":null}]
    },
    {"Name":"Stadt Handan","ID":"130400","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    }
   ]
  },
  {
   "Name":"Provinz Hunan","ID":"430000","Kind":[
    {"Name":"Stadt Changsha","ID":"430100","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"Name":"Stadt Zhuzhou","ID":"430200","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"Name":"Stadt Xiangtan","ID":"430300","Kind":[
     {"name":"Bezirk","id":"430301","child":null},{"name":"Bezirk Yuhu","id":"430302","child":null},{"name":"Bezirk Yuetang","id":"430304","child":null},{"name":"Kreis Xiangtan","id":"430321","child":null},{"name":"Stadt Xiangxiang","id":"430381","child":null},{"name":"Stadt Shaoshan","id":"430382","child":null}]
    },
    {"Name":"Stadt Hengyang","ID":"430400","Kind":[
     {"name":"Bezirke unter der Gerichtsbarkeit der Stadt","id":"430401","child":null},{"name":"Bezirk Zhuhui","id":"430405","child":null},{"name":"Bezirk Yanfeng","id":"430406","child":null},{"name":"Bezirk Shigu","id":"430407","child":null},{"name":"Bezirk Zhengxiang","id":"430408","child":null},{"name":"Bezirk Nanyue","id":"430412","child":null},{"name":"Kreis Hengyang","id":"430421","child":null},{"name":"Kreis Hengnan","id":"430422","child":[
      {"name":"Stadt Santang",id:"430422",child:null},{"name":"Stadt Chejiang",id:"430422",child:null}
     ]},{"name":"Kreis Hengshan","id":"430423","child":null},{"name":"Kreis Hengdong","id":"430424","child":null},{"name":"Kreis Qidong","id":"430426","child":null},{"name":"Stadt Leiyang","id":"430481","child":null},{"name":"Stadt Changning","id":"430482","child":null}]
    }
   ]
  },
  {
   "Name": "Provinz Guangdong", "ID": "440000", "Kind": [
    {"Name":"Guangzhou","id":"440100","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"Name":"Stadt Shaoguan","ID":"440200","Kind":[
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
    },
    {"name":"Name","id":"440300","child":[
     {"name":"Bezirk","id":"440301","child":null},{"name":"Bezirk Luohu","id":"440303","child":null},{"name":"Bezirk Futian","id":"440304","child":null},{"name":"Bezirk Nanshan","id":"440305","child":null},{"name":"Bezirk Baoan","id":"440306","child":null},{"name":"Bezirk Longgang","id":"440307","child":null},{"name":"Bezirk Yantian","id":"440308","child":null}]
    },
    {"Name":"Stadt Zhuhai","ID":"440400","Kind":[
     {"name":"Bezirk","id":"440401","child":null},{"name":"Bezirk Xiangzhou","id":"440402","child":null},{"name":"Bezirk Doumen","id":"440403","child":null},{"name":"Bezirk Jinwan","id":"440404","child":null}]
    }
   ]
  },
  {
   "Name": "Nansha-Inseln", "ID": "900001", "Child": null
  }
 ];

 var eText = document.getElementById('Eingabe');
 neues CascadeMenu(eText,json);

Eine gepackte JS-Kaskaden-Dropdown-Funktion ist abgeschlossen, und Sie können Ihren eigenen CSS-Stil entsprechend dem Bild schreiben, um den gewünschten Effekt zu erzielen.

Oben finden Sie den detaillierten Inhalt der Implementierungsschritte der kaskadierenden Dropdown-Menüliste der objektorientierten Kapselung von js. Weitere Informationen zum Dropdown-Menü der Kapselung von js finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Implementierung eines Dropdown-Menüs für die HTML-Navigationsleiste mit JavaScript
  • JavaScript, um den Effekt eines Dropdown-Menüs auf einer Webseite zu erzielen
  • Detaillierte Erklärung zur Verwendung der Dropdown-Menükomponente von Vue.js
  • js Dropdown-Menü-Klicks neben der Implementierung zum Zusammenklappen (Fallstrick-Aufzeichnung)
  • Eine kurze Erläuterung zur Implementierung benutzerdefinierter Dropdown-Menüanweisungen in Vue.js
  • js realisiert den Effekt des eigenständigen Dropdown-Menüs mit Schaltflächenschalter
  • js legt das standardmäßig ausgewählte Element im Dropdown-Menü dynamisch fest
  • Reines JS, um den Dropdown-Menüeffekt für das Geburtsdatum [Jahr, Monat, Tag] zu erzielen
  • JS implementiert ein Beispiel für das Klicken auf das Dropdown-Menü, um den ausgewählten Inhalt mit dem Eingabefeld zu synchronisieren
  • js verhindert die standardmäßige Rechtsklick-Dropdown-Menümethode

<<:  Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)

>>:  Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration der MySQL-Version 8.0.24

Dieser Artikel zeichnet die Installations- und Ko...

Eine kurze Analyse der Unterschiede und Funktionen zwischen Übergang, Transformation und Übersetzung in CSS3

transformieren und übersetzen Transformieren bezi...

Lösung zur Konvertierung in Inline-Styles in CSS (css-inline)

Sprechen Sie über die Szene E-Mail senden Einbett...

Vue implementiert die vollständige Auswahlfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System

1. Wechseln Sie in das Verzeichnis /etc/init.d: ​...

Beispiel für die Implementierung eines gestrichelten Rahmens mit html2canvas

html2canvas ist eine Bibliothek, die Canvas aus H...

So starten Sie das Quellcode-Debugging von Tomcat in Idea und rufen Tomcat zum Debuggen auf

Wenn Sie das Idea-Entwicklungstool zum Debuggen v...

So verwenden Sie Cursor-Trigger in MySQL

Cursor Die von der Auswahlabfrage zurückgegebenen...

Binäre Typoperationen in MySQL

Dieser Artikel stellt hauptsächlich die binären O...

Verhindern Sie, dass HTML- und JSP-Seiten zwischengespeichert und erneut vom Webserver abgerufen werden.

Wenn der Benutzer sich abgemeldet hat und im Brows...

Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

Grundlegende Syntax Die Verwendung von Text-Overf...

Detaillierte Erläuterung der Ausführungsreihenfolge der JavaScript-Alarmfunktion

Inhaltsverzeichnis Frage analysieren lösen Ersetz...

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

Shell ist ein in der Programmiersprache C geschri...

Zehn wichtige Fragen zum Erlernen der Grundlagen von Javascript

Inhaltsverzeichnis 1. Was ist Javascript? 2. Was ...

Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites

Die virtuelle Maschine, die ich von einer bestimm...