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?
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?
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.
Etant debutant en javascript pourrais tu me donner un exemple?
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>
Bonjour,Lequel ?Envoyé par phpaide
A+
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 : 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>
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>
Youhou...
Pour moi, ca marche a par que je voulais juste remplir une div à partir d'une autre
MERCI![]()
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager