JavaScript-Code zum Erstellen dynamischer Menüs oder Dropdown-Listen

Dieses Mal bringe ich Ihnen den JavaScript-Code zum Erstellen eines dynamischen Menüs oder einer Dropdown-Liste. Es gibt Vorsichtsmaßnahmen für die Verwendung von JavaScript zum Erstellen eines Dynamisches Menü oder Dropdown-Liste, die folgenden sind praktische Fälle, schauen wir uns das an.

In vielen Szenarien müssen wir Menüs, Dropdown-Listen oder Listenelemente dynamisch erstellen. Im Folgenden finden Sie den grundlegendsten Code zum Implementieren der oben genannten Funktion. Sie können ihn entsprechend den tatsächlichen Anforderungen erweitern.

function makeMenu(items, tags) {
  tags = tags || ['ul', 'li']; // default tags
  var parent = tags[0];  var child = tags[1]; 
  var item, value = &#39;&#39;;  for (var i = 0, l = items.length; i < l; i++) {
    item = items[i];    // Separate item and value if value is present
    if (/:/.test(item)) {
      item = items[i].split(&#39;:&#39;)[0];
      value = items[i].split(&#39;:&#39;)[1];
    }    // Wrap the item in tag
    items[i] = &#39;<&#39;+ child +&#39; &#39;+
      (value && &#39;value="&#39;+value+&#39;"&#39;) +&#39;>&#39;+ // add value if present
        item +&#39;</&#39;+ child +&#39;>&#39;;
  } 
  return &#39;<&#39;+ parent +&#39;>&#39;+ items.join(&#39;&#39;) +&#39;</&#39;+ parent +&#39;>&#39;;
}

Verwendung:

// Dropdown select monthmakeMenu(
  ['January:JAN', 'February:FEB', 'March:MAR'], // item:value
  ['select', 'option']
); 
// List of groceriesmakeMenu(
  ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
  ['ol', 'li']
);

Die oben genannten sind nur ein kleiner Teil dieser praktischen JavaScript-Codeschnipsel. Es wird empfohlen, solche grundlegenden Codeschnipsel selbst zu sammeln oder zu schreiben Wird in vielen Projekten verwendet oder bietet durch einige Änderungen umfassendere Funktionen. Durch die Verwendung dieser Codefragmente sparen Sie viel Entwicklungszeit.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Empfohlene Lektüre:

JavaScript-Code-Snippet, um festzustellen, ob ein Datum gültig ist

Ermitteln Sie die maximale Breite oder Höhe von eine Reihe von Elementen JavaScript-Code

Das obige ist der detaillierte Inhalt vonJavaScript-Code zum Erstellen dynamischer Menüs oder Dropdown-Listen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!