Discussion :

[neywhone]

Bonjour a tous,

Je suis confronter a un problème depuis quelques jours, j'ai suivi le Tutorial suivant :

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

Et donc j'aimerais récupérer les valeurs de mon <li> sélectionné pour le mettre dans un <input type="hidden" /> pour pouvoir les transmettre a mon formulaire.

Mon code HTML :

Code html :

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

1
2
3
4
5
6
<ul>
<li value="1"><img style="padding-bottom:3px; padding-right:3px;" src="class_select/img_class/Mage.gif" alt="Ranged" />Ranged</li>
<li value="2"><img style="padding-bottom:3px; padding-right:3px; width:18px;" src="http://s613869596.onlinehome.fr/dclick/img/warrior_protection.jpg" alt="Tank" />Tank <input type="hidden" value="Tank" name="avatar" /> </li>
<li value="3"><img style="padding-bottom:3px; padding-right:3px; width:18px;" src="http://s613869596.onlinehome.fr/dclick/img/paladin_holy.jpg" alt="Healer" />Healer <input type="hidden" value="Healer" name="avatar" /> </li>
<li value="4"><img style="padding-bottom:3px; padding-right:3px; width:18px;" src="http://s613869596.onlinehome.fr/dclick/img/rogue_assassination.jpg" alt="Melee" />Melee <input type="hidden" value="Melee" name="avatar" /> </li>
</ul>

Script JAVA :

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: "",
		    callback: null
		};	
		// mélange des paramètres fournis et 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", true);
 
			// 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", true);
				}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", true);
 
				// appel d'une fonction personnalisée
				if (opts.callback)
					opts.callback($(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);

Merci de votre aide cordialement

[mathieu]

affichez le contenu des variables pour vérifier qu'elles contiennent bien ce que vous souhaitez ($(this), $(this).find("li"), $(this).attr("value"),...)

[neywhone]

Bonjour Mathieu,

Tout d'abord je te remercie de ta ta réponse, je commence javascript et donc ce n'est pas facile merci de ta compréhension.

ci dessus tu me site un code, concrètement comment l'utilisé ? je veux juste récupérer ma valeur que j'ai sélectionné dans ma liste déroulante et pas la globalité, cette valeur je veux la retransmettre dans la "value" de mon <input type="hidden" />, pourrais tu me donner la ligne exacte pour réalisé cela ou une description plus approfondie afin que je puisse comprendre le fonctionnement.

En espérant une réponse.
Merci bien cordialement.

[Toufik83]

bonsoir,
si c'est juste pour récupérer le Texte des li, tu peux utiliser ce bout de code.

Code :

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

1
2
3
4
5
6
7
8
 
$(function(){
	var obj=$("ul"),Letext;
  obj.find("li").click(function(){
  	Letext=$(this).text();
    alert(Letext);
  });
});

[mathieu]

pour afficher quelque chose il suffit d'utiliser la commande

Code :

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

console.log(choseAVoir);

et de regarder le résultat dans la console de dévloppement

[neywhone]

Un grand merci a vous pour vos réponses.

Cordialement