Récupérer valeur ou text d'un li

Version imprimable

Bonjour,

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

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:

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.

13/06/2013, 12h36
SpaceFrog
avec

Code:

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:

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:

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

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

Code:

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:

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

Et voici le code du plugin:

Code:

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);

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:

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:

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