Discussion :

[Blackmoule]

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

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

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var nombre = sasNb.options[sasNb.selectedIndex].value;
 
for(i = 0; i < nombre; ++i) {

Voulez-vous essayer la solution suivante?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[eleydet]

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

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

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

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

[eleydet]

Bonsoir,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<style>
div {
  background : #269;
  margin: 14px;
  padding: 14px;
}
</style>

[Blackmoule]

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

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

[eleydet]

Bonsoir,

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