Afficher un certain nombre de DIV en fonction du choix du nombre dans une liste déroulante

Version imprimable

Bonjour,

Encore une fois je fais appel à vous, j'ai bien peur de bloquer sur quelque chose qui a l'air assez con à réaliser. L'idée, comme écrit dans le titre, est de faire une fonction qui permet d'afficher un certain nombre de DIV en fonction d'un nombre choisi dans une liste déroulante. Rien de bien compliqué vu comme ça, pourtant je bloque :/

J'ai cependant commencé à écrire une fonction JS, mais qui ne fonctionne pas. J'ai également pensé à le faire en jQuery mais je ne vois pas comment (et j'ai des connaissances très limitées avec jQuery).

Voici le code HTML :

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
<label>SAS : </label>
                        <select name="sas" id="sas" onChange="Javascript:choixSas()">
                            <option value="0">Non</option>
                            <option value="1">Oui</option>
                        </select>
                    <div id="sasOk" style="display:none">
                        <label>Nombre : </label>
                            <select name="sasNb" id="sasNb" onchange="Javascript:nbSas()">
                                <option value="1">1</option>
                                <?php
                                for ($i = 2; $i <= 10; $i++){
                                    echo '<option value="'.$i.'">'.$i.'</option>';
                                }
                                ?>
                            </select>
                        <div id="nombreOk" name="" style="display: none">
                            <lable>Pour : </label>
                                <select name="sasSex" id="sasSex">
                                    <option value="0">Homme</option>
                                    <option value="1">Femme</option>
                                    <option value="2">Les deux</option>
                                </select>
                            <label>SAS-1 : </label>
                                <select name="sasHeure" id="sasHeure">
                                    <option value="0">00</option>
                                </select>
                                :
                                <select name="sasMinute" id="sasMinute">
                                    <option value="0">00</option>
                                </select></br></br>
                        </div>
                    </div>

Le code en JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function choixSas() {
                            if (document.ajoutCourse.sas.value == 1)
                                document.getElementById("sasOk").style.display = "inline";
                            else
                                document.getElementById("sasOk").style.display = "none";
                        }
 
                        var sasNb = document.getElementById('sasNb');
                        sasNb.addEventListener('change', nbSas);
 
                        function nbSas() {
                            var i;
                            var nombre = sasNb.options[sasNb.selectedIndex].value;
 
                            for(i = 0; i < nombre; ++i) {
                                var div = document.createElement('div');
                                document.body.appendChild(div);
                            }
                        }

Merci d'avance pour vos réponses !

07/06/2017, 13h37
eleydet
Bonjour,

Une idée, peut-être?
Première ligne ci-dessous : nombre est une chaîne de caractères.
Deuxième ligne : nombre est à convertir en nombre.
Code:

1 2 3 4 var nombre = sasNb.options[sasNb.selectedIndex].value; for(i = 0; i < nombre; ++i) {
Voulez-vous essayer la solution suivante?

Code:

for(i = 0; i < nombre*1; i++) {

Rebonjour,

C'est curieux... En effectuant la correction que je viens de proposer avec un éditeur de texte en ligne, le problème qui existait a été corrigé. Tout de même, j'ai été étonné. J'ai testé à nouveau avec mon éditeur habituel (Gedit). Pas besoin d'effectuer de correction, le code fonctionne. J'ai juste converti en JS la partie en php et ajouté un commentaire pour éviter le doublon...

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
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<label>SAS : </label>
<select name="sas" id="sas" onChange="Javascript:choixSas()">
  <option value="0">Non</option>
  <option value="1">Oui</option>
</select>
<div id="sasOk">
  <label>Nombre : </label>
  <select name="sasNb" id="sasNb" onchange="Javascript:nbSas()">
     <option value="1">1</option>
     <script>
       for ($i = 2; $i <= 10; $i++){
         document.write('<option value="'+$i+'">'+$i+'</option>');
       }
     </script>
   </select>
   <div id="nombreOk" name="" style="display: none">
      <lable>Pour : </label>
      <select name="sasSex" id="sasSex">
        <option value="0">Homme</option>
        <option value="1">Femme</option>
        <option value="2">Les deux</option>
      </select>
      <label>SAS-1 : </label>
      <select name="sasHeure" id="sasHeure">
        <option value="0">00</option>
      </select>
      :
      <select name="sasMinute" id="sasMinute">
        <option value="0">00</option>
      </select></br></br>
    </div>
</div>
<script>
function choixSas() {
  if (document.ajoutCourse.sas.value == 1)
    document.getElementById("sasOk").style.display = "inline";
  else
    document.getElementById("sasOk").style.display = "none";
}
 
var sasNb = document.getElementById('sasNb');
//sasNb.addEventListener('change', nbSas);
 
function nbSas() {
  var i;
  var nombre = sasNb.options[sasNb.selectedIndex].value;
  for(i = 0; i < nombre; ++i) {
    var div = document.createElement('div');
    document.body.appendChild(div);
  }
}
</script>
</body>
</html>

07/06/2017, 16h26
Blackmoule

Merci pour la réponse, malheureusement ce code ne fait pas effet chez moi. Quand je choisi un chiffre je n'ai aucun div qui s'affiche :/

Peut-être que cela vient de mon IDE (NetBeans pour ma part)
07/06/2017, 16h36
eleydet

Bonjour,

Pour constater l'apparition des balises div (elles ne contiennent rien), sous FireFox, j'appuie sur la touche F12 du clavier. Je regarde l'onglet Inspecteur, dans la partie inférieure de l'écran. Ces balises div apparaissent dès qu'on a sélectionné un nombre.
07/06/2017, 20h48
eleydet
Bonsoir,

Une autre manière de voir le résultat est d'ajouter une feuille de style.
Code:

1 2 3 4 5 6 7 <style> div { background : #269; margin: 14px; padding: 14px; } </style>
08/06/2017, 16h09
Blackmoule

Ah oui, effectivement avec la feuille de style c'est plus visible :mouarf:

Bon le dernier soucis est qu'en faite, mise à part la première fois que l'on sélectionne le nombre, le choix de la liste n'affiche pas le nombre exact de div il l'additionne x)

Je cherche une solution depuis tout à l'heure mais je pense que je suis vraiment une b*** en JS xD
08/06/2017, 22h03
eleydet

Bonsoir,

document.body.removeChild() permet d'enlever un élément.