Maison >interface Web >tutoriel CSS >Comment puis-je convertir une liste non ordonnée en liste déroulante de sélection à l'aide de jQuery ?
Comment puis-je convertir une liste non ordonnée en liste déroulante de sélection à l'aide de jQuery ?
- DDDoriginal
- 2024-11-11 13:42:02521parcourir
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 (
<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
- Il parcourt tous les éléments au sein de l'UL.
- Pour chaque , il crée un nouvel élément
- Il ajoute l'élément
- Enfin, il remplace l'UL par l'élément
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!
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 ?