Discussion :

[Tendhor57]

Bonjour,

Voilà actuellement j'ai une liste qui ressemble à cela:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul name="liste" id="liste">
	<li value="toto">toto</li>
	<li value="tata">tata</li>
	<li value="titi">titi</li>
</ul>

Celle-ci est transformer en pseudo liste déroulante grçace à un pluging JQuery que l'on peut retrouver ici:

http://khayyam.developpez.com/articl...jquery/plugin/

Mon soucis et que je souhaite récupérer soit la "value" soit le "champ text" de mon li selectionné lorsque je click sur un bouton, après test et regarder sur internet j'ai obtenu ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("#monbouton").click(function(){
	var selection = $('#liste li');
 
          var test1=selection.val();
          var test2=selection.text();
          var test3=selection.html();
 
          alert(test1);
          alert(test2);
          alert(test3);
 
var selection2 = $('#liste li:selected');
 
          var test4=selection2.val();
          var test5=selection2.text();
          var test6=selection2.html();
 
          alert(test4);
          alert(test5);
          alert(test6);
 
});

Quelque soit mes test ci-dessus, cela me renvoi soit UNDEFINED soit (vide) ou soit l'arlert ne s'affiche pas

Quelqu'un pourrais t'il m'aider svp.

[SpaceFrog]

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var selection = $('#liste li');

tu recupères une collection des lis ...donc pas un seul li
un li n'a pas d'attribut selected ...

sur le click tu dois lui attribuer une classe ou un data pour le tagguer comme "selected"

ensuite pour recupérer le contenu c'est avec text() ou html() car un li n'a pas de value

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul name="liste" id="liste">
	<li value="toto">toto</li>
	<li value="tata">tata</li>
	<li value="titi">titi</li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('#liste li').click ( function(){
alert( $(this).text());
})

[Tendhor57]

Cela ne marche pas
Même après avoir tenté cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('#liste li').click ( function(){
alert("toto");
//alert( $(this).text());
})

Aucune erreur est détectée par firebug et la boite d'alert ne s'affiche pas.
Cela pourrai t'il venir de mon "plugin" ? Car celui transforme mes <li>

Voici a ce sujet la fonction qui utilise le plugin:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(function(){
	$("ul:eq(0)").imgDropDown({title:"Couches"});
	$("ul:eq(0)").imgDropDown({title:"..."});
});

Et voici le code du plugin:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
(function($) {
//Définition du plugin
    $.fn.imgDropDown = function(options) {   
 
        // définition des paramètres par défaut
        var defaults = {
            title: "",
            selectEvent: null
        };   
        // mélange des paramètres fournis et des paramètres par défaut
        var opts = $.extend(defaults, options);       
 
        // création d'une liste
        function createList(f){
            // créer la première zone, affichant l'option sélectionnée
            var cell = $('<div class="dropdownCell">' + opts.title + '</div>');
 
            // créer la seconde zone, affichant toutes les options
            var dropdown = $('<div class="dropdownPanel"></div>');               
 
            $(this).find("li").each(function(){
                dropdown.append($('<div class="dropdownOpt"></div>')
                    .click(onSelect)
                    .attr("value", $(this).attr("value"))
                    .append($(this).html())       
                    .hover(function(){$(this).addClass("dropdownOptSelected");},
                           function(){$(this).removeClass("dropdownOptSelected");})
                );
            });
 
            // on masque la zone déroulante
            dropdown.hide();
            $.data(cell, "visible", false);
 
            // on remplace la balise ul par notre liste personnalisée
            $(this).after(dropdown);
            $(this).after(cell);
            $(this).remove();
 
            // on positionne l'évènement de déroulage de la liste
            cell.click(function(){       
                // si la liste est déroulée
                if ($.data(cell, "visible")){
                    dropdown.slideUp("fast");
                    $.data(cell, "visible", false);
                }else{
                    dropdown.slideDown("fast");
                    $.data(cell, "visible", true);
                }
            });
 
            // fonction appelée à chaque sélection d'un élément
            function onSelect(){           
                cell.html($(this).html());
                cell.attr("value", $(this).attr("value"));
                dropdown.slideUp("fast");
 
                $.data(cell, "visible", false);
 
                // appel d'une fonction personnalisée
                if (opts.selectEvent)
                    opts.selectEvent($(this));
            }               
        }
 
        // création d'une liste déroulante personnalisée pour tous les éléments de l'objet jQuery
        $(this).each(createList);   
 
        // interface fluide
        return $(this);
    };   
})(jQuery);

[Tendhor57]

Après de longue voir très très longue recherche, je vient de trouver une solution, en faite c'est en regardant cette partie la du code du plugin:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function onSelect(){           
    cell.html($(this).html());
    cell.attr("value", $(this).attr("value"));
    dropdown.slideUp("fast");
    $.data(cell, "visible", false);
    // appel d'une fonction personnalisée
    if (opts.selectEvent)
        opts.selectEvent($(this));
    }               
}

le cell semble être la "cellule" qui apparait comme élélment sélectionné dans la liste déroulante et donc en faisant cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("cell").click(function(){
alert(cell.html());   
})

Je récupère vien mes champs écris à l'intérieur de mes <li>.

Problème résolu, merci pour les réponses SpaceFrog, je clos le sujet