Comment convertir une liste non ordonnée en un menu déroulant stylisé à l'aide de jQuery ?

Création de menus déroulants stylisés à partir de listes non ordonnées avec jQuery

Conversion d'une liste non ordonnée en une liste la liste déroulante peut grandement améliorer l'expérience utilisateur sur un site Web. jQuery fournit une solution élégante pour cette tâche, vous permettant de transformer facilement vos listes en menus déroulants interactifs.

Problème :

Comment convertir une liste non ordonnée dans le format ci-dessous :

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

dans 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 peut vous aider dans cette conversion process :

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

Cet extrait de code parcourt votre liste non ordonnée à l'aide de jQuery, créant un

élément et en l’ajoutant à chaque élément de la liste. Les valeurs et les textes contenus dans l'option les éléments sont récupérés respectivement à partir des attributs href et innerHTML des balises d'ancrage.

Améliorations :

Pour ajouter du style à votre liste déroulante, vous pouvez utiliser des plugins jQuery tels que [jqTransform](http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) pour offrir une expérience déroulante personnalisée et visuellement attrayante.

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!