Ajout de liste deroulante

**axe31** · 30/05/2012, 10h17

Bonjour,
Voilà je suis vraiment novice en javascript et je ne trouve comment ajouter ou supprimer une liste déroulante identique sans la valeur de la précédente liste déroulante à l'aide d'un bouton ajouter et d'un bouton supprimer.

Voila mon code HTML/PHP

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
<div id="strate_1" style="display: block">
	<select name="strate1" id="strate1">
		<option value="-1">- - - Choisissez une strate - - -</option>
			<?php
                                $connexion = mysql_connect($serveur, $admin, $mdp);
                                $sql6 = "SELECT DISTINCT mes.`ID_SARCEP` as strate1, sARCEP.`STRATE_ARCEP` as strate2
                                                FROM `mesures` mes 
                                                INNER JOIN `strates_arcep` sARCEP
                                                ON mes.ID_SARCEP = sARCEP.ID_SARCEP
                                                WHERE mes.`ID_TYPELOCALISATION` = 1";
                                if($connexion != false)
                                {
                                        $choixbase = mysql_select_db($base, $connexion);        
                                        $rech_strate = mysql_query($sql6);
                                        $TstrateID = array();
                                        $TstrateNAME = array();
                                        $nb_strate = 0;
                                        if($rech_strate != false)
                                        {
                                                while($ligneStrate = mysql_fetch_assoc($rech_strate))
                                                {
                                                        array_push($TstrateID, $ligneStrate['strate1']);
                                                        array_push($TstrateNAME, $ligneStrate['strate2']);
                                                        $nb_strate++;
                                                }
                                        }
                                        for($p = 0; $p < $nb_strate; $p++)
                                                {
                                                        echo("<option value=\"$TstrateID[$p]\"".((isset($idStrateARCEP) && $idStrateARCEP == $TstrateID[$p])?" selected":"-1").">$TstrateNAME[$p] </option>");
                                                }
                                        echo("<input type=\"button\" value=\"Ajouter une strate\" onClick=\"addStrate();\" /> </br>");
                                        echo("<input type=\"button\" value=\"Supprimer une strate\" onClick=\"delStrate();\" />");
                                }
                                mysql_close($connexion);
                                ?>
	</select>
</div>

**RomainVALERI** · 30/05/2012, 10h27

Ici, c'est le forum JS ^^ poste plutot le code HTML généré s'il te plait.

**axe31** · 30/05/2012, 11h05

Oui pas faux XD

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
    <head>
        <meta charset="utf-8" />
        <title>Test liste</title>
        <script type="text/javascript">
            function show_div(id)
            {
                for (var i = 1; i <= 2; i++)
                {
                    if (i == id)
                    {
                        document.getElementById('titre_' + i).style.display = 'block';
                        document.getElementById('strate_' + i).style.display = 'block';
                    }
                    else 
                    {
                        document.getElementById('titre_' + i).style.display = 'none';
                        document.getElementById('strate_' + i).style.display = 'none';
                    }
                }
            }
            function addStrate()
            {
 
            }
        </script>
    </head>
    <body>
        <h3>Test CRP</h3>
        <form action="" method="post" id="chg">
        <fieldset>
            <legend>Identificationde la campagne</legend>
                <select name="annee" id="annee" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez une année - - -</option>
                    <option value="2012" selected>2012 </option>
                    <option value="2011"-1>2011 </option>
                </select>
                <select name="semestre" id="semestre" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez un semestre - - -</option>
                    <option value="1" selected>Semestre 1</option>
                </select>
                <select name="semaine" id="semaine" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez une semaine - - -</option>
                    <option value="11" selected>Semaine 11</option>
                    <option value="10">Semaine 10</option>
                </select>
                <select name="prestataire" id="prestataire" onchange="document.forms['chg'].submit();">
                    <option value="-1">- - - Choisissez un prestataire - - -</option>
                    <option value="1" selected>GET</option>
                </select>
                <select name="campagne" id="campagne">
                    <option value="1">2012-S1_Voix_S11_DO_SO_GET</option>
                </select>
        </fieldset>
        <fieldset>
            <legend> Filtres </legend>
            <table>
                <thead> <!-- En-tête du tableau -->
                    <tr>
                       <th>Opérateurs</th>
                       <th>Localisation</th>
                       <th>Modes</th>
                       <th>
                       <div id="titre_1" style="display: block">
                       Strates ARCEP
                       </div>
                       <div id="titre_2" style="display: none">
                       AXES
                       </div>
                       </th>
                    </tr>
                </thead>
                <tbody> <!-- Corps du tableau -->
                    <tr>
                        <td> <div id="operateurs">
                            <input type="radio" name="operateurs" value="3" id="ORANGE" checked="checked" /> <label for="ORANGE">ORANGE</label> <br />
                            <input type="radio" name="operateurs" value="2" id="BYT" /> <label for="BYT">BYT</label> <br />
                            <input type="radio" name="operateurs" value="1" id="SFR" /> <label for="SFR">SFR</label> <br />
                            <input type="radio" name="operateurs" value="4" id="FREE" /> <label for="FREE">FREE</label> <br />
                            <input type="radio" name="operateurs" value="5" id="tousOp" /> <label for="tousOp">Tous</label> <br />
                            </div>
                        </td>
                        <td> <div id="localisation">
                            <input type="radio" name="localisation" value="1" id="agglo" onclick="show_div(1);" checked="checked" /> <label for="agglo">Agglomeration</label> <br />
                            <input type="radio" name="localisation" value="2" id="axes" onclick="show_div(2)" /> <label for="axes">Axes</label> <br />
                            <input type="radio" name="localisation" value="3" id="tousLoca" /> <label for="tousLoca">Tous</label> <br />
                            </div >
                        </td>
                        <td> <div id="modes">
                            <input type="checkbox" name="modes[]" value="1" id="2G" checked="checked"/> <label for="2g">2G</label><br />
                            <input type="checkbox" name="modes[]" value="2" id="3G" checked="checked"/> <label for="3g">3G</label><br />
                            <input type="checkbox" name="modes[]" value="3" id="4G" checked="checked"/> <label for="4g">4G</label><br />
                            </div>
                        </td>
                        <td> 
                            <div id="champ_1" style="display: block">
                                <select name="strate1" id="strate1">
                                    <option value="-1">- - - Choisissez une strate - - -</option>
                                        <option value="4"-1>- DE 5K </option>
                                        <option value="1"-1>10-20K </option>
                                        <option value="3"-1>5-10K </option>
                                        <option value="5"-1>50-400K </option>
                                        <option value="8"-1>TOP14 </option>
                                        <option value="2"-1>\N </option>
                                <input type="button" value="Ajouter une strate" onClick="addStrate();" /> </br>
                                <input type="button" value="Supprimer une strate" onClick="delStrate();" />                                </select>
                            </div>
                            <div id="champ_2" style="display: none">
                                <select name="axe" id="axe">
                                    <option value="-1">- - - Choisissez un axe - - -</option>
                                    <option value="2"-1> </option>
                                    <option value="55"-1>A0004 </option>
                                    <option value="47"-1>A0010 </option>
                                    <option value="53"-1>A0071 </option>
                                    <option value="49"-1>A0075 </option>
                                    <option value="54"-1>A0701 </option>
                                    <option value="56"-1>D0001 </option>
                                    <option value="57"-1>D0123 </option>
                                    <option value="51"-1>D0766 </option>
                                    <option value="52"-1>D0772 </option>
                                    <option value="48"-1>N0009 </option>
                                    <option value="50"-1>N1009 </option>
                                </select>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
        <input type="submit" name="ok" id="ok" value="Envoyer" />
        </form>
    </body>

**RomainVALERI** · 30/05/2012, 12h27

Jette un oeil du côté de Node.cloneNode : tu récupères l'élément à dupliquer, et tu insères son clone avec appendChild. Tu as déjà pratiqué les manipulations du DOM en JS ?

**axe31** · 30/05/2012, 13h06

Ok ok, je vais voir ça. Non pas du tout je commence vraiment le JavaScript donc j'ai lu quelques trucs par ci par là.

**axe31** · 04/06/2012, 15h33

j'ai réussi a utiliser cloneNode mais j'ai plusieurs questions

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
function show_div(id)
{
	for (var i = 1; i <= 3; i++)
	{
		if (i == id)
		{
			document.getElementById('titre_' + i).style.display = 'block';
			document.getElementById('strate_' + i).style.display = 'block';
		}
		else 
		{
			document.getElementById('titre_' + i).style.display = 'none';
			document.getElementById('strate_' + i).style.display = 'none';
		}
	}
}
 
var nb_ajout = 0;
function addListeStrate()
{
	if(nb_ajout < 9 )
	{
		var strate1 = document.getElementById('strate');
		var strate2 = strate1.cloneNode(true);		
 
		strate1.parentNode.appendChild(strate2);		
		nb_ajout++;
	}
}
 
 
function delListeStrate()
{
	if(nb_ajout !=0)
	{
	var lastStrate = document.getElementById('strate');
 
	lastStrate.parentNode.removeChild(lastStrate);
	nb_ajout--;
	}
 
}

Tout d'abord sur la forme:
- je veux inserer les elements dupliqués juste avant mon bouton +
Nom : forme.PNG
Affichages : 62
Taille : 5,8 Ko

- Et quand j'utilise ma fonction supprimer il me supprime la première liste alors que je voudrais que c'a me supprime la dernière ajoutée.
Nom : forme2.PNG
Affichages : 57
Taille : 5,1 Ko

Nom : forme2.PNG
Affichages : 57
Taille : 5,1 Ko

Et aussi sur le fond:
- Vu que les listes sont clonées comment récupérer les bonnes valeurs pour l'envoyer au formulaire car quand je submit il me retourne seulement la valeur de la première liste.

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>E2endOAM</title>
		<script src="show_div.js"></script>
		<script src="clonage.js"></script>
	</head>
 
	<body>
		<header>
			<a href="/e2endoam/index.html"> <img src="logo.jpg" alt="banniere" title="Accueil"/> </a>
			<h2>Outil automatique de mesures EndToEnd</h2>
			<nav>
				<ul>
					<li><a href="index.html">Accueil</a></li>
 
					<li><a href="upload.html">Upload</a></li>
					<li><a href="mesure.php">Mesure</a></li>
				</ul>
			</nav>
		</header>
 
		<section>
			<form name="mesure" action="" method="post" id="chg">
 
			<select name="annee" id="annee" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez une année - - -</option>
				<option value="2012" selected>2012 </option>
				<option value="2011"-1>2011 </option>
			</select>
 
			<select name="semestre" id="semestre" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez un semestre - - -</option>
				<option value="1" selected>Semestre 1</option>
			</select>
 
			<select name="semaine" id="semaine" onchange="document.forms['chg'].submit();">
				<option value="-1">- - - Choisissez une semaine - - -</option>
				<option value="11">Semaine 11</option><option value="10">Semaine 10</option>
			</select>		</section>
 
		<section>
			<table>
				<thead> <!-- En-tête du tableau -->
					<tr>
						<th> <h3>Pré-Filtre </h3> </th>
						<th> <h3>Localisation</h3> </th>
						<th>
							<div id="titre_1" style="display: block">
								<h3>Strates ARCEP</h3>
							</div>
 
							<div id="titre_2" style="display: none">
								<h3>AXES</h3>
							</div>
 
							<div id="titre_3" style="display: none">
								<h3>Ligne Commerciale</h3>
							</div>
					  </th>
					</tr>
				</thead>
 
				<tbody> <!-- Corps du tableau -->
					<tr>
						<td>
							<div id="prefiltre">
								<input type="radio" name="prefiltre" value="1" id="active" checked="checked" /> 
								<label for=active>Activé</label> <br />
								<input type="radio" name="prefiltre" value="0" id="desactive" />
								<label for=desactive>Désactivé</label>
							</div>
						</td>
 
						<td>
							<div id="localisation">
								<input type="radio" name="localisation" value=2 id="agglo" onclick="show_div(1);" checked="checked" /> <label for="agglo">Agglomeration</label> <br />
								<input type="radio" name="localisation" value=1 id="axes" onclick="show_div(2);" /> <label for="axes">Axes</label> <br />
								<input type="radio" name="localisation" value=4 id="trains" onclick="show_div(3);" /> <label for="trains">Trains</label> <br />
							</div >
						</td>
						<td> 
							<div id="strate_1" style="display: block">
								<select name="strate" id="strate">
									<option value="-1">- - - Choisissez une strate - - -</option>
									<option value="4"-1>- DE 5K </option>
									<option value="9"-1>10-20K </option>
									<option value="5"-1>5-10K </option>
									<option value="3"-1>50-400K </option>
									<option value="8"-1>TOP14 </option>
									<option value="2"-1>\N </option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter une strate" title="Ajouter une strate" align="middle" onClick="addListeStrate();" />
								<img src="./images/moins.png" alt="Supprimer une strate" title="Supprimer une strate" align="middle" onClick="delListeStrate();" />
							</div>
 
							<div id="strate_2" style="display: none">
								<select name="listeAxes" id="listeAxes">
									<option value="-1">- - - Choisissez un axe - - -</option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter un axe" title="Ajouter un axe" align="middle" onClick="addListeAxe();" />");
								<img src="./images/moins.png" alt="Supprimer un axe" title="Supprimer un axe" align="middle" onClick="delListeAxe();" />");
							</div>
 
							<div id="strate_3" style="display: none">
								<select name="ligneCom" id="ligneCom">
									<option value="-1">- - - Choisissez une ligne commerciale - - -</option>
								</select>
 
								<img src="./images/plus.png" alt="Ajouter une Ligne Commerciale" title="Ajouter une Ligne Commerciale" align="middle" onClick="addListeLigneCom();" />");
								<img src="./images/moins.png" alt="Supprimer une Ligne Commerciale" title="Supprimer une Ligne Commerciale" align="middle" onClick="delListeLigneCom();" />");
							</div>
						</td>
					</tr>
				</tbody>
			</table>
 
			<input type="submit" name="ok" id="ok" value="Envoyer" />
			</form>	
		</section>
 
		<footer>
 
			<ul>
					<li><a href="index.html">Accueil</a></li>
					<li><a href="upload.html">Upload</a></li>
					<li><a href="mesure.php">Mesure</a></li>
			</ul>
		</footer>
	</body>
 
</html>

Ajout de liste deroulante

JavaScript

Vue hybride

Discussions similaires

Partager

Partager