Maison > interface Web > tutoriel CSS > Comment convertir des listes non ordonnées en listes déroulantes de sélection élégantes à l'aide de jQuery ?

Comment convertir des listes non ordonnées en listes déroulantes de sélection élégantes à l'aide de jQuery ?

DDD
Libérer: 2024-11-12 16:30:02
original
469 Les gens l'ont consulté

How to Convert Unordered Lists to Stylish Select Dropdowns using jQuery?

Conversion de listes non ordonnées en listes déroulantes de sélection élégantes avec jQuery

Imaginez avoir une liste non ordonnée remplie de liens et vous souhaitez la transformer en une liste déroulante de sélection élégante. Avec la puissance de jQuery, c'est une tâche facile.

Conversion de la liste non ordonnée

L'extrait de code suivant convertit une liste non ordonnée avec des balises d'ancrage renvoyant vers des pages externes en une liste déroulante de sélection :

$(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);
    });
});
Copier après la connexion

Ce code parcourt chaque liste non ordonnée avec la classe "selectdropdown", crée un élément de sélection pour chaque liste, ajoute une option pour chaque lien dans la liste et remplace la liste d'origine par l'élément de sélection.

Style et fonctionnalité

Pour styliser la liste déroulante de sélection, vous pouvez vous référer à des bibliothèques de style externes telles que jQuery Transform. De plus, vous pouvez modifier le code pour ouvrir automatiquement le lien sélectionné dans une nouvelle fenêtre ou un nouvel onglet :

$(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);

-       $select.on('change', function() { window.open($(this).val(), '_blank'); });
+       $select.on('change', function() { window.open($(this).find('option:selected').val(), '_blank'); });
    });
});
Copier après la connexion

Cette modification ajoute un écouteur d'événement à l'élément de sélection qui ouvre le lien sélectionné dans une nouvelle fenêtre ou un nouvel onglet. lorsque l'utilisateur modifie la valeur de l'élément de sélection.

Avec ces améliorations, vous pouvez facilement créer des listes déroulantes de sélection élégantes et fonctionnelles à partir de listes non ordonnées à l'aide de jQuery.

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
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal