Dupliquer une liste deroulante avec un clic

**phpaide** · 07/02/2007, 18h10

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?

**ryan** · 07/02/2007, 18h29

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.

**phpaide** · 07/02/2007, 18h31

Etant debutant en javascript pourrais tu me donner un exemple?

**phpaide** · 07/02/2007, 20h28

A l'aide!!!!!!

**ryan** · 07/02/2007, 20h54

Pas de panique.....

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

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
 
<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 :

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

**phpaide** · 08/02/2007, 11h09

ton script m'affiche un select mais vide

**E.Bzz** · 08/02/2007, 11h19

Bonjour,

Envoyé par phpaide

ton script m'affiche un select mais vide

Lequel ?

A+

**ryan** · 08/02/2007, 13h03

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

**phpaide** · 08/02/2007, 13h24

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 :

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

**phpaide** · 08/02/2007, 16h39

personne peut m'aider?

**ryan** · 08/02/2007, 20h39

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 :

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

**dragonfly** · 11/05/2007, 11h09

Youhou...

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

MERCI

Dupliquer une liste deroulante avec un clic

JavaScript

Discussions similaires

Partager

Partager