Code JavaScript pour créer des menus dynamiques ou des listes déroulantes

Cette fois, je vais vous apporter le code JavaScript pour créer un menu dynamique ou une liste déroulante. Il existe des précautions pour utiliser JavaScript pour créer un. menu dynamique ou liste déroulante. Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

Dans de nombreux scénarios, nous devons créer dynamiquement des menus, des listes déroulantes ou des éléments de liste. Ce qui suit est le code le plus basique pour implémenter la fonction ci-dessus. Vous pouvez l'étendre en fonction des besoins réels.

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;;
}

Utilisation :

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

Les éléments ci-dessus ne sont qu'une petite partie de ces extraits de code JavaScript pratiques. Il est recommandé de collecter ou d'écrire vous-même ces extraits de code de base, ils peuvent l'être. utilisé dans Il est utilisé dans de nombreux projets ou fournit des fonctions plus complètes grâce à quelques modifications. L'utilisation de ces extraits de code vous fera gagner beaucoup de temps de développement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles liés !

Lecture recommandée :

Extrait de code JavaScript pour déterminer si une date est valide

Obtenez la largeur ou la hauteur maximale de un ensemble d'éléments de code JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!