Dupliquer une liste deroulante avec un clic

Version imprimable

07/02/2007, 18h10
phpaide

Dupliquer une liste deroulante avec un clic

Bonjour,
j'ai une liste deroulante <select...> avec une image a coté. Je voudrais, lorsque je clique sur l'image, dupliquer la liste deroulante.
Comment puis je faire?
07/02/2007, 18h29
ryan

Yop!

En gros, tu as deux solutions: manipuler l'innerHTML d'une DIV, par exemple, ou alors ajouter des noeuds.

Mais ce qui sera commun aux deux solutions, c'est la boucle dont le nombre d'itérations sera déterminé par la proporiété length du SELECT que tu veux dupliquer, cette propriété te donnant le nombre d'options présentes dans le SELECT.
07/02/2007, 18h31
phpaide

Etant debutant en javascript pourrais tu me donner un exemple?
07/02/2007, 20h28
phpaide

A l'aide!!!!!!

Pas de panique.....

Voici un code un peu batard, mais qui est plus court et qui fonctionne:

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
 
<html>
<head>
<script language="javascript">
function addselect()
{
 
// trouver le nombre d'options dans le select à copier
opnum = document.forms.ma_form.mon_select.length;
 
// trouver la div qui sera le parent du nouveau select
var la_div = document.getElementById("ma_div");
 
// créer le nouveau select
var new_select = document.createElement("select");
 
// ajouter le nouveau select dans la div
la_div.appendChild(new_select)
 
for (i=0;i<opnum;i++)
  {
  new_select.options[i]= new Option(document.forms.ma_form.mon_select.options[i].text,document.forms.ma_form.mon_select.options[i].value);
  }
}
</script>
</head>
<body>
<form name="ma_form">
<select name="mon_select">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select> 
</form>
<br>
<a href="#" onClick="addselect()">Click</a>
<div id="ma_div">
</div>
</body>
</html>

Voici un code beaucoup plus joli, mais qui est plus long:

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
 
<html>
<head>
<script language="javascript">
function addselect()
{
 
// trouver le nombre d'options dans le select à copier
opnum = document.forms.ma_form.mon_select.length;
 
// trouver la div qui sera le parent du nouveau select
var la_div = document.getElementById("ma_div");
 
// créer le nouveau select
var new_select = document.createElement("select");
 
// ajouter le nouveau select dans la div
la_div.appendChild(new_select)
 
for (i=0;i<opnum;i++)
  {
 
  // créer l'option
  var l_option = document.createElement("option");
 
  // ajouter l'option au nouveau select
  new_select.appendChild(l_option);
 
  // donner les attributs à la nouvelle option
  l_option.setAttribute("value",document.forms.ma_form.mon_select.options[i].value);
  l_option.setAttribute("text",document.forms.ma_form.mon_select.options[i].text);
 
  }
}
</script>
</head>
<body>
<form name="ma_form">
<select name="mon_select">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select> 
</form>
<br>
<a href="#" onClick="addselect()">Click</a>
<div id="ma_div">
</div>
</body>
</html>

08/02/2007, 11h09
phpaide

ton script m'affiche un select mais vide
08/02/2007, 11h19
E.Bzz

Bonjour,

Citation:

Envoyé par phpaide

ton script m'affiche un select mais vide

Lequel ?

A+
08/02/2007, 13h03
ryan

Zarbi, les deux fonctionnent chez moi, sinon je ne les aurais pas postés.

j'ai tester que le premier. Mais j'ai fait un script simple qui me permet d'avoir une liste deroulante qui s'ajoute quand je clique sur un bouton (une image). Le probleme c'est que je peu en obtenir qu'un seul de plus, alors que moi je veux en obtenir autant de fois que je clic sur le bouton.
Voici le script:
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 <html> <head> <script language="Javascript"> function bascule(elem) { etat=document.getElementById(elem).style.visibility; if(etat=="hidden"){document.getElementById(elem).style.visibility="visible";} } </script> </head> <body> <form> <table><tr> <td> <select multiple="multiple" size="5"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </td> <td> <input type="button" onClick="bascule('one');" value="On/Off"> //remplace par l'image si je veux une image </td> <td name="one" id="one" style="visibility: hidden"> <select multiple="multiple" size="5"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </td> </tr> </table> </form> </body> </html>

08/02/2007, 16h39
phpaide

personne peut m'aider?

Heu, le script que je t'ai envoyé peut ajouter un select à chaque click.
Mais bon, si tu veux ajouter le select dans une nouvelle cellule d'un tableau:

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
 
<html>
<head>
<script language="javascript">
function addselect()
{
 
// trouver le nombre d'options dans le select à copier
opnum = document.forms.ma_form.mon_select.length;
 
// créer une nouvelle ligne et une nouvelle cellule
var la_table = document.getElementById("ma_table");
var le_tr = la_table.insertRow(la_table.rows.length);
var le_td = le_tr.insertCell(le_tr.cells.length);
 
// créer le nouveau select
var new_select = document.createElement("select");
 
// ajouter le nouveau select dans la cellule
le_td.appendChild(new_select);
 
for (i=0;i<opnum;i++)
  {
  new_select.options[i]= new Option(document.forms.ma_form.mon_select.options[i].text,document.forms.ma_form.mon_select.options[i].value);
  }
 
}
</script>
</head>
<body>
<form name="ma_form">
<select name="mon_select">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select> 
</form>
<br>
<a href="#" onClick="addselect()">Click</a>
<table id="ma_table">
</table>
</body>
</html>

11/05/2007, 11h09
dragonfly

Youhou...

Pour moi, ca marche a par que je voulais juste remplir une div à partir d'une autre

MERCI:king: