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

Dupliquer une liste deroulante avec un clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager