Réutilisation de fonctions pour plusieurs listes déroulantes

Version imprimable

Bonjour,

Je suis en alternance dans une entreprise et je travail actuellement sur un projet, dans lequel je suis un peut bloqué car je suis vraiment débutant en JavaScript.
Je travail actuellement sur une liste déroulante composé de checkbox afin de faire une sélection multiple sans forcément passer par "Ctrl". Mon problème est que mon code actuel permettait de fonctionner sur une seule liste déroulante mais la je dois l'adapter pour qu'il fonctionne sur plusieurs.
J'ai donc fait quelques bidouilles, notamment différencier la deuxième liste déroulante avec un autre id etc... mais cela ne fonctionne pas, car lorsque je clique sur le bouton afficher de la première sa m'affiche les 2.

Je vous met ci-dessous mon code et vous remercie d'avance pour vos réponses ;)

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
$(function(){
	$(".things> input:checkbox").change(function(){
		check();
	});
	$(".things").click(function(){
		if($(this).children("input:checkbox").prop("checked"))
		{
			$(this).children("input:checkbox").prop("checked",false);
		}
		else
		{
			$(this).children("input:checkbox").prop("checked",true);
		}
		check();
	});
	var obj = document.getElementById("container1")
	alert(obj.nodeName.toLowerCase());
	if (obj.nodeName.toLowerCase() == "container1"){
		$("#container1").toggle();
	}else{
		$("#container").toggle();
	}
});
function check()
{
	var str="";
	$(".things > input:checkbox:checked").parent().each(function(){
		str += $(this).text()+"; ";
	});
	$("#result1").val(str);
	$("#result").val(str);
}
function display(ele)
{
	$(ele).val((($(ele).val()=="Hide")?"Show":"Hide"));
	var obj1 = document.getElementById("container1")
	alert(obj1.nodeName.toLowerCase());
	if (obj1.nodeName.toLowerCase() == "container1"){
		$("#container1").toggle("blind");
	}else{
		$("#container").toggle("blind");
	}
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
	<input type="text" id="result1" size="30"><input type="button" onclick="display(this)" value="Show">
	<div id="container1" >
		<div class="things"><input type="checkbox" value="">Nicolas Bernard1</div>
		<div class="things"><input type="checkbox" value="">Benjamin Miquel1</div>
		<div class="things"><input type="checkbox" value="">Mael Jarnole1</div>
		<div class="things"><input type="checkbox" value="">Thibault Collard1</div>
		<div class="things"><input type="checkbox" value="">Max Chevalier1</div>
	</div>
 
	<input type="text" id="result" size="30"><input type="button" onclick="display(this)" value="Show">
	<div id="container" >
		<div class="things"><input type="checkbox" value="">Nicolas Bernard</div>
		<div class="things"><input type="checkbox" value="">Benjamin Miquel</div>
		<div class="things"><input type="checkbox" value="">Mael Jarnole</div>
		<div class="things"><input type="checkbox" value="">Thibault Collard</div>
		<div class="things"><input type="checkbox" value="">Max Chevalier</div>
	</div>
</body>

Salut !
Une bonne pratique, quand tu fais des listes, c'est d'utiliser <ul>. Pour les champs de formulaire, ajoute des <label> pour les rendre plus facile à cliquer, en particulier pour les boutons radio et checkbox qui sont petits. D'autres petits trucs, en HTML 5 tu n'as plus besoin des attributs type sur les balises <script> ; je ne crois pas que les value de tes checkboxes servent à quelque chose ; et enfin, ajoute readonly sur tes champs quand ils sont mis à jour par ton script, sinon l'utilisateur peut croire qu'il doit écrire quelque chose dedans et ça le perturbe.

Je me suis permis de modifier ton code html :

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
   <meta charset=utf-8>
   <title>Ici il faut mettre un titre</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jui/ui/jquery-ui.js"></script>
<script>
 
...
 
</script>
<style>
 
.things {
   border: bottom solid 1px;
   background-color: #c5d;
   width: 200px;
   list-style: none;
}
 
</style>
</head>
<body>
 
<input readonly type="text" id="result1" size="30">
<input type="button" onclick="display(this)" value="Show">
<ul id="liste1">
   <li class="things">
      <label>
         <input type="checkbox">
         Nicolas Bernard 1
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Benjamin Miquel 1
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Mael Jarnole 1
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Thibault Collard 1
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Max Chevalier 1
      </label>
   </li>
</ul>
 
<input readonly type="text" id="result2" size="30">
<input type="button" onclick="display(this)" value="Show">
<ul id="liste2">
   <li class="things">
      <label>
         <input type="checkbox">
         Nicolas Bernard 2
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Benjamin Miquel 2
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Mael Jarnole 2
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Thibault Collard 2
      </label>
   </li>
   <li class="things">
      <label>
         <input type="checkbox">
         Max Chevalier 2
      </label>
   </li>
</ul>
 
</body>
</html>

J'ai aussi renommé les id des listes en "liste1" et "liste2". Je pense que ça t'aidera à ne pas faire de confusion.

Il y a un passage que je ne comprends pas dans ton code :

Code:

1
2
3
var obj = document.getElementById("container1");
alert(obj.nodeName.toLowerCase());
if (obj.nodeName.toLowerCase() == "container1"){

Le nodeName te renverra toujours "div" (ou "ul" avec mon code), donc je ne vois pas l'intérêt du if. En fait, on n'utilise quasiment jamais nodeName. Je pense que ce dont tu as besoin c'est obj.id.

Si tu reposes les choses à plat, avec ce nouveau code HTML et en utilisant les id, tu as toutes les cartes en main pour y arriver. Je te laisse chercher, ok ? ;)

29/10/2013, 22h28
Nico1131

Merci pour tes conseils, le truc c'est que pour l'instant la partie HTML5 du projet est dans une autre version, moi je m'occupe de l'ancienne donc sans HTML5. Mais je garde quand même sur le coude ;)

Après je crois avoir trouver la solution a mon problème avec un ami. Sauf que le problème est bien que les fonctions ne sont pas du tout adapté parce qu'il ne pouvait être utilisé une seule fois par page, donc pas possible de gérer plusieurs liste.

Mais ce code la marche parfaitement pour une liste déroulante :D