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!

jquery html for select format using class finally function this href ul

Déclaration：

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

Article précédent：Pourquoi mes icônes Bootstrap se chargent-elles différemment localement et en ligne ?Article suivant：Pourquoi mes icônes Bootstrap se chargent-elles différemment localement et en ligne ?

Articles Liés

Voir plus

• Comment ajouter des icônes aux champs de saisie de recherche avec Bootstrap ?
• Comment réorganiser les colonnes verticales en horizontales en HTML/CSS ?
• Comment créer un pied de page fixe en bas de page en HTML ?
• Comment styliser les ancres HTML avec CSS ?
• Comment empiler des divisions Bootstrap de différentes hauteurs à l'aide de CSS ?

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

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved