11496 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Trier un select en JS

Pages :
Bonjour

J'aimerais pouvoir trier une liste déroulante en JS. Je ne peut pas trier ma liste via un usort ou autre fonction PHP car je récupère les données de cette liste via 2 fonctions distinctes.

J'ai essayé plusieurs script trouvé sur internet mais ils ne fonctionnent pas..

Si vous en avez un qui fonctionne, je suis preneuse Smiley cligne
Code JS à appeler dans le onload du <body>.
Le <select> à trier a comme attribut id "liste".
Le tri se fait sur le contenu textuel des <option>.

<script type="text/javascript">
  function onload()
  {
    var liste=document.getElementById('liste');
    var options=liste.options;
    var nboptions=options.length;
    var options2=new Array();

    for (var ix=0; ix<nboptions; ix++) options2 [ ix ] =options [ ix ] ;
    options2.sort(triage);
    for (var ix=0; ix<nboptions; ix++) options [ ix ] =options2 [ ix ] ;

    function triage(option1, option2)
    {
      if (option1.text<option2.text) return -1;
      if (option1.text>option2.text) return 1;
      return 0;
    }
  }
</script>
Ça fonctionne !

Mais, ben oui il en faut un... Ça trie bien le select, mais pour des problème de graphisme, j'ai utilisé le script Dropkick pour styler mon select. Ce script transforme le select en liste et cette dernière n'est pas triée...

Attention seulement, je ne peut pas rajouter un ID à cette liste (il y a des classes par contre)..

Merci pour vos réponse Smiley cligne
Il faut faire le rendu du select après le tri. Donc soit tu lance le script après le tri, soit il existe une méthode qui fait un refresh. A voir dans la doc (si il y en a une) Smiley biggrin
@Oken j'ai mis la fonction de tri (dans le header) avant l'appel au script Dropckick (dans le footer) mais ça ne fonctionne pas..
C'est possible de dire à un script de s’exécuter après un autre ?
Difficile de savoir exactement comment va s’exécuter tes JS sans les codes. Smiley lol

Mais bon par défaut, le code jQuery s’exécutera avant le onLoad.

Pour corriger ça, tu peux mettre ton code de tri dans le jQuery juste avant de lancer ton plugin de rendu.
Désolée pour le temps de réponse..

Voici mon code JS :
<!-- Script Tri Select -->
<script type="text/javascript">
	function onload(){
		var liste=document.getElementById('ville');
		var options=liste.options;
		var nboptions=options.length;
		var options2=new Array();
		for(var ix=0; ix<nboptions; ix++) options2[ix] = options[ix];
		options2.sort(triage);
		for(var ix=0; ix<nboptions; ix++) options[ix] = options2[ix];
		function triage(option1, option2){
			if(option1.text<option2.text) return -1;
			if(option1.text>option2.text) return 1;
			return 0;
		}
	}
</script>
<!-- Script Custom select -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropkick-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){ $('.select-perso').dropkick(); });</script>


Mes select ont comme classe ".select-perso" et la fonction "onload()" s'éxecute comme ceci : 
<body <?php body_class(); ?> onload="onload()">


Et je suis désolée mais je ne vois tjrs pas comment exécuté l'un avant l'autre.. Le "onload()" je suis obligée de le mettre dans le body non ?
Modifié par Melusine85 (23 Oct 2013 - 10:26)
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropkick-1.0.0.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).load( function() {

<!-- Script Tri Select -->
		var liste=document.getElementById('ville');
		var options=liste.options;
		var nboptions=options.length;
		var options2=new Array();
		for(var ix=0; ix<nboptions; ix++) options2 Smiley ix  = options Smiley ix ;
		options2.sort(triage);
		for(var ix=0; ix<nboptions; ix++) options Smiley ix  = options2 Smiley ix ;
		function triage(option1, option2){
			if(option1.text<option2.text) return -1;
			if(option1.text>option2.text) return 1;
			return 0;
		}

<!-- Script Custom select -->
$('.select-perso').dropkick(); 

	});

Modifié par tazzkiller (27 Oct 2013 - 21:49)
Bonjour

Désolée tazzkiller de te répondre aussi tard...

Le $('.select-perso').dropkick() ne fonctionne pas avec $(document).load( function() donc le select ne s'affiche pas et en plus le tri ne se fait plus..

Si quelqu'un a une idée je suis preneuse car là je sèche complètement...
avec le .load bizarre ca, et si mets juste le tri ca marche pas non plus ? et tu as bien retirer le javascript que tu as mis dans ta balise body ?
Modifié par tazzkiller (14 Nov 2013 - 15:18)
Oui en ne mettant que ça : 
<script type="text/javascript">
	$(document).load(function(){
		// Script Tri Select
		var liste=document.getElementById('ville');
		var options=liste.options;
		var nboptions=options.length;
		var options2=new Array();
		for(var ix=0; ix<nboptions; ix++) options2[ix] = options[ix];
		options2.sort(triage);
		for(var ix=0; ix<nboptions; ix++) options[ix] = options2[ix];
		function triage(option1, option2){
			if(option1.text<option2.text) return -1;
			if(option1.text>option2.text) return 1;
			return 0;
		}
	});
</script>

ça ne tri plus rien..

Et si je rajoute 
$(function(){ $('#ville').dropkick(); });
ça me style bien mon select (qui est en fait une liste) donc ça peut poser des pb non ?

Lien vers mes fichiers de test (zip)
Modifié par Melusine85 (14 Nov 2013 - 15:29)
Modérateur
Effectivement ça ça pause des problèmes:

$(document).load(function(){
});

plutôt utiliser un des 2 suivants suivant les besoins:

//page chargée:
$(window).load(function(){
});

// DOM chargé:
$(document).ready(function(){
});
Ça marche presque !!

J'ai besoin de trier 2 select, j'ai donc repris le code du premier : 
// Script Tri Select VILLE
var liste=document.getElementById('ville');
var options=liste.options;
var nboptions=options.length;
var options2=new Array();
for(var ix=0; ix<nboptions; ix++) options2[ix] = options[ix];
options2.sort(triage);
for(var ix=0; ix<nboptions; ix++) options[ix] = options2[ix];
function triage(option1, option2){
	if(option1.text<option2.text) return -1;
	if(option1.text>option2.text) return 1;
	return 0;
}


Et j'ai modifier les variables pour le 2eme : 
// Script Tri Select SECTEUR
var listesec=document.getElementById('secteur');
var optionssec=listesec.options;
var nboptionssec=options.length;
var optionssec2=new Array();
for(var ix=0; ix<nboptionssec; ix++) optionssec2[ix] = optionssec[ix];
optionssec2.sort(triagesec);
for(var ix=0; ix<nboptionssec; ix++) optionssec[ix] = optionssec2[ix];
function triagesec(optionsec1, optionsec2){
	if(optionsec1.text<optionsec2.text) return -1;
	if(optionsec1.text>optionsec2.text) return 1;
	return 0;
}


Le 1er (ville) fonctionne mais pas celui des secteur.. En fait, pour être plus précise, le select est bien trié mais pas la liste qui sert pour l'affichage....

Edit : même en ne mettant QUE le trie des secteur, ça ne fonctionne pas...
Modifié par Melusine85 (14 Nov 2013 - 16:33)
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
});


$(".dk_options_inner:eq(3)").sortList();


essai avec ce code, tu le mets apres l'initialisation de dropkick et tu definis dans le eq() l'index de l'item ou tu veux appliquer le script .... tu dois aussi pouvoir retirer ton code de trie du select normalement avec celui la
Modifié par tazzkiller (14 Nov 2013 - 17:50)
tazzkiller a écrit :
$(&quot;.dk_options_inner:eq(3)&quot;).sortList();
essai avec ce code, tu le mets apres l'initialisation de dropkick et tu definis dans le eq() l'index de l'item ou tu veux appliquer le script


Euuh c'est à dire ? Peut tu m'expliquer cette phrase "definis dans le eq() l'index de l'item ou tu veux appliquer le script" stp ?

J'ai donc mis le code ci-dessous mais plus rien ne s'ordonne..
$(window).load(function(){
	$('.select-perso').dropkick();
			
	$(function(){
		$.fn.sortList = function(){
			var mylist = $(this);
			var listitems = $('li', mylist).get();
			listitems.sort(function(a, b){
				var compA = $(a).text().toUpperCase();
				var compB = $(b).text().toUpperCase();
				return (compA < compB) ? -1 : 1;
			});
			$.each(listitems, function(i, itm){
				mylist.append(itm);
			});
		}
	});
	
	$(".dk_options_inner:eq(3)").sortList();
});


J'ai essayé en mettant ça sinon : $(".select-perso").sortList(); mais ça ne marche pas plus..

Merci pour ton aide Smiley cligne
le eq() correspond à l'index de .select-perso , a savoir que le premier egal 0, le deuxieme 1 etc ....
mais il faut bien que tui laisses :
$(".dk_options_inner:eq(0)").sortList();  // pour le premier dropkick

car il s'agit de la class de l ' ul généré par dropkick ...
Coucou !

En visitant le site du plugin dropkick, on y trouve un méthode pour faire le refresh de la liste.
A placer après tes tris :

$(object).dropkick('refresh')
Ça marche !!!

Voici le code final : 
$(window).load(function(){		
	// Script Custom select
	$('.select-perso').dropkick();
	// Script Tri Select
	$(function(){
		$.fn.sortList = function(){
			var mylist = $(this);
			var listitems = $('li', mylist).get();
			listitems.sort(function(a, b){
				var compA = $(a).text().toUpperCase();
				var compB = $(b).text().toUpperCase();
				return (compA < compB) ? -1 : 1;
			});
			$.each(listitems, function(i, itm){
				mylist.append(itm);
			});
		}
	});
	$(".dk_options_inner:eq(1)").sortList();
	$(".dk_options_inner:eq(4)").sortList();
});


Merciiii. Smiley smile Je vais pouvoir partir en w-e sans que ça me prenne la tête !
Bonne journée
Pages :
Sujet clos
Aller à