Comment puis-je convertir une liste non ordonnée en liste déroulante de sélection à l'aide de jQuery ?

Conversion d'une liste non ordonnée en liste déroulante de sélection avec jQuery

Vous disposez d'une liste non ordonnée (UL) formatée comme suit :

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

Votre objectif est de le convertir en une liste déroulante () au format suivant :

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

Solution jQuery :

Pour y parvenir conversion, vous pouvez utiliser le code jQuery suivant :

$(function() {
    $('ul.selectdropdown').each(function() {
        var $select = $('<select>');

        $(this).find('a').each(function() {
            var $option = $('<option>');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});

Explication :

• Le code encapsule la conversion dans le $(function() { . .. }); block pour garantir qu'il s'exécute une fois la page chargée.
• Il parcourt tous les éléments UL avec la classe "selectdropdown".
• Pour chaque UL, il crée un nouveau

élément.

Il parcourt tous les éléments au sein de l'UL.

Pour chaque , il crée un nouvel élément avec le href comme valeur et le texte interne comme HTML.

Il ajoute l'élément au bouton

Enfin, il remplace l'UL par l'élément element.

Ce code convertira efficacement votre liste non ordonnée en une liste déroulante de sélection joliment stylée.

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!

source：php.cn

Article précédent：Pourquoi mes icônes Bootstrap se chargent-elles différemment localement et en ligne ? Article suivant：Comment pouvons-nous empêcher les effets de survol persistant sur les boutons des appareils tactiles ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

• Le code Java 8 peut-il s'exécuter sur une machine virtuelle Java 7 ?
  2024-11-14 16:42:02
• Comment obtenir des valeurs héritées avec des variables CSS ?
  2024-11-14 16:38:02
• Comment créer des relations de clés étrangères inter-bases de données dans MySQL InnoDB ?
  2024-11-14 16:37:02
• Pourquoi C a-t-il conservé le mot-clé statique après sa dépréciation ?
  2024-11-14 16:36:02
• Comment masquer automatiquement le texte d'un espace réservé lors du focus dans Chrome ?
  2024-11-14 16:35:02
• Quelle est la différence entre « setInterval » et « setTimeout » en JavaScript ?
  2024-11-14 16:36:02
• Comment obtenir la position de la barre de défilement en JavaScript ?
  2024-11-14 16:30:02
• Comment supprimer des éléments d'une tranche dans une structure en Go ?
  2024-11-14 16:29:02
• Comment trouver le nom de colonne avec la valeur maximale pour chaque ligne dans un DataFrame ?
  2024-11-14 16:28:02
• Comment utiliser les variables contextuelles avec les noms de classe CSS Tailwind ?
  2024-11-14 16:27:02

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

2

1841

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

10

2009

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

1695

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1595

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1613

Rubriques connexes

Plus>

• Solution pour redémarrer et sélectionner le périphérique de démarrage approprié
• Utilisation des fonctions aléatoires du langage C
• Comment l'Oracle tourne
• programmation multithread Java
• Quels sont les logiciels de test en ligne des performances informatiques ?
• Pilote de carte son pour ordinateur portable
• Comment enregistrer un e-mail professionnel
• bootmgr est manquant et ne peut pas démarrer

Recommandations populaires

• Comment configurer CSS pour dépasser les ellipses d'affichage
• Comment définir la taille de la police en CSS
• Comment utiliser le survol en CSS
• Comment définir l'espacement des caractères en CSS
• Quelles sont les nouvelles fonctionnalités de CSS3

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1417650
• 
  Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine

  4258745
• 
  Tutoriel vidéo JAVA pour débutants

  2485153
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  504176
• 
  Tutoriel d'introduction PHP base zéro

  858821

• 
  Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)

  1417650 temps d'étude
• 
  Tutoriel vidéo JAVA pour débutants

  2485153 temps d'étude
• 
  Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle

  504176 temps d'étude
• 
  Introduction rapide au développement web front-end

  215350 temps d'étude
• 
  Maîtrisez les didacticiels vidéo PS à partir de zéro

  879234 temps d'étude

• 
  [Web front-end] Démarrage rapide de Node.js

  6569 temps d'étude
• 
  Collection complète de cours full-stack de développement Web étranger

  5110 temps d'étude
• 
  Aller au langage pratique GraphQL

  4285 temps d'étude
• 
  Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape

  637 temps d'étude
• 
  Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures

  21820 temps d'étude

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal

• [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery
• [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3
• [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5
• [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery
• [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS
• [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique
• [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image
• [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

• [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)
• [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)
• [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)
• [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)
• [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes
• [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)
• [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)

• [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure
• [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches
• [Modèle frontal] Modèle Web de CV de travail créatif de concepteur
• [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne
• [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs
• [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne
• [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet
• [Modèle frontal] Modèle de site Web de service de trading de devises de style violet

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nous Clause de non-responsabilité Sitemap

© php.cn All rights reserved