[Résolu] Transformer liste ul en select

Salut,

J'utilise le plugin mixitup comme système de filtre pour un portfolio. J'aimerais transformer cette liste d'item en select mais je ne parviens pas à mettre en place la "redirection" si on peut dire. Je pense qu'il faut jouer avec data-filter mais malgré plusieurs essais je n'ai pas trouvé la solution. Dans le meilleur des cas le select me redirige vers une page inconnue genre : mapage.fr/undefined

Voici mon code :

HTML

<ul class="filters">
<li class="filter" data-filter="new"><h3>Nouveautés</h3></a></li>
<li class="filter" data-filter="print"><h3>Print</h3></a></li>
<li class="filter" data-filter="sites"><h3>Sites internet</h3></a></li>
<li class="filter" data-filter="videos"><h3>Vidéos</h3></a></li>
<li class="filter" data-filter="all"><h3>Toutes</h3></a></li>
</ul>

JS POUR TRANSFORMER LA LISTE EN SELECT

$(function($){
var combo = $('<select />').appendTo("ul.filters");
$("ul.filters li").each(function(){
if($(this).find("img").length == 0){
$('<option />', {"value": $(this).attr("data-filter"/*"href"*/), "text": $(this).text()}).appendTo(combo);
}
$("ul.filters select").change(function() {
window.location = $(this).attr('value');
});
});
});

Merci !
Modifié par yank (18 Sep 2013 - 11:15)

Peut être que cela vient de

window.location

mais je ne vois pas par quoi le remplacer ...

Une idée ?
Modifié par yank (15 Sep 2013 - 19:10)

Après de longues recherches j'obtiens quelques légers changements mais le filtre ne fonctionne toujours pas :

$(document).ready(function(){
	$('<select />').appendTo("ul.filters");
	$("ul.filters li").each(function(){
		$('<option />', {"value": $(this).attr("data-filter"), "text": $(this).text()}).appendTo( "ul.filters select" );
	});
	$( "ul.filters select" ).change( function() {
		window.location = $( this ).find( "option:selected" ).val();
		//$container.mixitup({filter: this.value});
	});
});

Maintenant lorsque j'utilise le select, je suis redirigé vers le nom du filtre, par exemple mapage.fr/videos au lieu de mapage.fr/undefined. C'est déjà mieux mais ça ne règle pas mon problème.

J'ai essayé avec un truc du genre

$container.mixitup({filter: this.value});

mais ça ne fonctionne pas non plus.

Pour faire plus simple... : Comment faire pour récupérer le data-filter à la place du traditionnel lien href via le select ?

Bonjour,

À une époque j'utilisais ça :

/********************************************************************************/
/*                               changer une liste en sélecteurs                */
/********************************************************************************/

//http://css-tricks.com/4064-unobtrusive-page-changer/
//http://css-tricks.com/examples/ConvertMenuToDropdown/

if (window.matchMedia("(max-width: 780px)").matches) {

$('.nav-mobil').hide();

$("<select />").insertAfter(".nav-mobil");
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Menu"
}).appendTo("nav select");
$(".nav-mobil a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});
$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});
}

Si ça peut vous aider...

Olivier C a écrit :
Bonjour,

À une époque j'utilisais ça :

/********************************************************************************/
/*                               changer une liste en sélecteurs                */
/********************************************************************************/

//http://css-tricks.com/4064-unobtrusive-page-changer/
//http://css-tricks.com/examples/ConvertMenuToDropdown/

if (window.matchMedia("(max-width: 780px)").matches) {

$('.nav-mobil').hide();

$("<select />").insertAfter(".nav-mobil");
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Menu"
}).appendTo("nav select");
$(".nav-mobil a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});
$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});
}

Si ça peut vous aider...

Salut,

Heureusement j'ai fini par résoudre moi même mon problème depuis le temps ... comme souvent.
Mais merci pour ton aide en tout cas
Modifié par yank (25 Sep 2013 - 13:07)

Bonjour à tous!
@yank : tu as résolu ton problème, c'est une bonne chose, mais pourrais-tu partager la solution?
Merci!

awip a écrit :
Bonjour à tous!
@yank : tu as résolu ton problème, c'est une bonne chose, mais pourrais-tu partager la solution?
Merci!

Salut,
Exemple