parent et child

**ted00** · 18/12/2010, 09h14

Bonjour,

Quelqu'un pourrait il me dire comment transformer ce code javascript pour que je puisse avoir plusieurs instance sur la même page.

Je m'explique :

J'aimerai pourvoir mettre ce multi select plussieurs fois sur ma page

Code :

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

1
2
3
4
5
6
7
8
9
 
  $().ready(function() {
   $('#addop').click(function() {
    return !$('#select1 option:selected').remove().appendTo('#select2');
   });
   $('#remove').click(function() {
    return !$('#select2 option:selected').remove().appendTo('#select1');
   });
  });

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
 
<dd> <div class="floatL">
<select multiple="multiple" id="select1">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
<option value="6">User 6</option>
<option value="7">User 7</option>
</select>
<a href="#" id="addop">add &gt;&gt;</a>
</div>
<div class="floatL">
<select multiple="multiple" id="select2"></select>
<a href="#" id="remove">&lt;&lt; remove</a>
</div> 
</dd>

Je ne m'en sort pas avec parent et child pour que quand je clique sur le bouton add il bouge mon user ver le select2 qui a comme parent mon <dd>.

J'épère avoir été clair.

Merci
Ted

**Pierrot0459** · 18/12/2010, 10h39

>>J'aimerai pourvoir mettre ce multi select plussieurs fois sur ma page

avec clone, ce ne serai pas mieux ??
a++

**danielhagnoul** · 18/12/2010, 20h03

Bonsoir

Attention, un id doit être unique (select1, select2), j'ai trouvé plus facile de m'en passer, voir le code HTML de l'exemple.

Exemple :

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
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
98
99
100
101
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
<dd>		
	<div class="floatL">
		<select multiple="multiple">
			<option value="1">User 1</option>
			<option value="2" selected="selected">User 2</option>
			<option value="3">User 3</option>
			<option value="4">User 4</option>
			<option value="5" selected="selected">User 5</option>
			<option value="6">User 6</option>
			<option value="7">User 7</option>
		</select>
		<a class="addop" href="#">add &gt;&gt;</a>
	</div>
	<div class="floatL">
		<select multiple="multiple"></select>
		<a class="remove" href="#">&lt;&lt; remove</a>
	</div>
</dd>
<dd>		
	<div class="floatL">
		<select multiple="multiple">
			<option value="1">User 1</option>
			<option value="2" selected="selected">User 2</option>
			<option value="3">User 3</option>
			<option value="4">User 4</option>
			<option value="5" selected="selected">User 5</option>
			<option value="6">User 6</option>
			<option value="7">User 7</option>
		</select>
		<a class="addop" href="#">add &gt;&gt;</a>
	</div>
	<div class="floatL">
		<select multiple="multiple"></select>
		<a class="remove" href="#">&lt;&lt; remove</a>
	</div>
</dd>
<dd>		
	<div class="floatL">
		<select multiple="multiple">
			<option value="1">User 1</option>
			<option value="2" selected="selected">User 2</option>
			<option value="3">User 3</option>
			<option value="4">User 4</option>
			<option value="5" selected="selected">User 5</option>
			<option value="6">User 6</option>
			<option value="7">User 7</option>
		</select>
		<a class="addop" href="#">add &gt;&gt;</a>
	</div>
	<div class="floatL">
		<select multiple="multiple"></select>
		<a class="remove" href="#">&lt;&lt; remove</a>
	</div>
</dd>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
$("a.addop").click(function(){
	var objParent = $(this).parent(),
		objSelect = objParent.next().children("select");
 
	objParent.children("select").children("option:selected").remove().appendTo(objSelect);
});
 
$("a.remove").click(function() {
	var objParent = $(this).parent(),
		objSelect = objParent.prev().children("select");
 
	objParent.children("select").children("option:selected").remove().appendTo(objSelect);
});
 
		});
 	</script>
</body>  
</html>

**ted00** · 18/12/2010, 22h02

Hello
Merci je vais tester demain matin.
Ted

parent et child

jQuery

Discussions similaires

Partager

Partager