Comment convertir des listes non ordonnées en listes déroulantes de sélection élégantes à l'aide de 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);
    });
});

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

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!