[AJAX] Onchange() avec select

**Canyata** · 09/09/2010, 15h51

Bonjour à tous,

Je souhaite remplir 3 listboxs de manière dynamique.

La première est chargée au début de la page (Niveau1)

Code :

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

1
2
3
4
5
6
7
8
echo"<select name='niveau1' id='niveau1' onchange='go_Niveau1()'STYLE='width:200'>";
            echo"<option value='-1'>Choisir un type de panne</option>";
            $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
            $result = mysql_query($sql);
            while ($row = mysql_fetch_assoc($result)) {
                        echo "<option value='" . $row["ID_N1"] . "'>" . $row["NOM_N1"] . "</option>";
                                            }
echo"</select>";

Le deuxieme (Niveau 2) sera chargée en fonction du choix fait dans Niveau1.

Pour ce faire, lorsqu'un choix est réaliser dans Niveau1 un onchange='go_Niveau1()' a été crée. Sur la page Vue_editer.php où est écrit le bout de code précédent, il y a en entête:

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
<script type='text/javascript'>
function getXhr(){
            var xhr = null;
            if(window.XMLHttpRequest) // Firefox et autres
                        xhr = new XMLHttpRequest();
            else if(window.ActiveXObject){ // Internet Explorer
                        try {
                                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch (e) {
                                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
            }else { // XMLHttpRequest non supporté par le navigateur
                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                        xhr = false;
            }
            return xhr;
            }
function go_Niveau1(){
            var xhr = getXhr();
            // On défini ce qu'on va faire quand on aura la réponse
            xhr.onreadystatechange = function(){
            // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('niveau2').innerHTML = leselect;
           }
}
// Ici on va voir comment faire du post
xhr.open("POST","vue/ajaxNiveau1.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('niveau1');
idniveau1 = sel.options[sel.selectedIndex].value;
xhr.send("ID_N1="+idniveau1);
}
 </script>

la fonction getXHr test si le navigateur supporte le XMLHttpRequest.
La deuxieme go_Niveau1() s'effectue lors d'un changement sur le select niveau1.

Jusqu'a la tout marche bien et la fonction go_Niveau1() appel mon ajax qui donne ça:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau2'id='niveau2' STYLE='width:200'>";
            if(isset($_POST["ID_N1"])){
                        $sql="SELECT DISTINCT combinaison.ID_N2, niveau2.NOM_N2
                                FROM niveau2, combinaison
                                WHERE ID_N1 = ".$_POST["ID_N1"]."
                                AND combinaison.ID_N2 = niveau2.ID_N2
                                ORDER BY NOM_N2";
                        $result=mysql_query($sql);
                        while( $row = mysql_fetch_assoc($result) ){
                                echo "<option value='".$row["ID_N2"]."'>".$row["NOM_N2"]."</option>";
                        }
           }
echo "</select>";
FermerBD( $connection );
?>

A l'heure actuelle, mon select niveau1 se rempli bien ainsi que mon select niveau2 pas de soucis

Et maintenant les choses se complique un peu.

En fonction du choix qui sera fait dans le select de niveau 2.

mon select niveau2 et mon select niveau 3 ressemblent a ça (écrit sur Vue_editer.php):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
echo"<div id='niveau2' style='display:inline'>";
            echo"<select name='niveau2'id='niveau2' onchange='go_Niveau2()'STYLE='width:200'>";
                        echo"<option value='-1'>-</option>";
            echo "</select>";
echo"</div>";
echo"<div id='niveau3' style='display:inline'>";
            echo"<select name='niveau3'id='niveau3' STYLE='width:200'>";
                        echo"<option value='-1'>-</option>";
            echo "</select>";
echo"</div>";

Il y a également dans la partie script au début de Vue_editer.php cette fonction:

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
 
function go_Niveau2(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
            leselect = xhr.responseText;
            // On se sert de innerHTML pour rajouter les options a la liste
            document.getElementById('niveau3').innerHTML = leselect;
}
}
 
// Ici on va voir comment faire du post
xhr.open("POST","vue/ajaxNiveau2.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('niveau2');
idniveau2 = sel.options[sel.selectedIndex].value;
xhr.send("ID_N2="+idniveau2);
}

Et donc l'ajax ajaxNiveau2:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau3'id='niveau3' STYLE='width:200'>";
            if(isset($_POST["ID_N2"])){
                        $sql="SELECT DISTINCT combinaison.ID_N3, niveau3.NOM_N3
                                FROM niveau3, combinaison
                                WHERE ID_N2 = ".$_POST["ID_N2"]."
                                AND combinaison.ID_N3 = niveau3.ID_N3
                                ORDER BY NOM_N3";
                        $result=mysql_query($sql);
                        while( $row = mysql_fetch_assoc($result) ){
                                echo "<option value='".$row["ID_N3"]."'>".$row["NOM_N3"]."</option>";
                        }
            }
echo "</select>";
FermerBD( $connection );
?>

mais a partir de la, ça ne marche plus impossible de remplir le select niveau 3 dynamiquement en fonction du choix du select de niveau2.

Quelqu'un peut m'aider???

Je remet le code en 1 bout ici:

Vue_editer.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
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
 
<script type='text/javascript'>
            function getXhr(){
                var xhr = null;
                if(window.XMLHttpRequest) // Firefox et autres
                    xhr = new XMLHttpRequest();
                else if(window.ActiveXObject){ // Internet Explorer
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                else { // XMLHttpRequest non supporté par le navigateur
                    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                    xhr = false;
                }
                return xhr;
            }
            function go_Niveau1(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('niveau2').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau1.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('niveau1');
                idniveau1 = sel.options[sel.selectedIndex].value;
                xhr.send("ID_N1="+idniveau1);
            }
            function go_Niveau2(){
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('niveau3').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau2.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('niveau2');
                idniveau2 = sel.options[sel.selectedIndex].value;
                xhr.send("ID_N2="+idniveau2);
            }
        </script>
.........
.........
.........
echo"<div id='Description'>";
                            echo "<h2><u>Description</u></h2>";
                            echo"<table>";
                                echo"<tr>";
                                    echo"<td>";
                                        echo"<select name='niveau1' id='niveau1' onblor='go_Niveau1()'STYLE='width:200'>";
                                            echo"<option value='-1'>Choisir un type de panne</option>";
                                            $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
                                            $result = mysql_query($sql);
                                            while ($row = mysql_fetch_assoc($result)) {
                                                echo "<option value='" . $row["ID_N1"] . "'>" . $row["NOM_N1"] . "</option>";
                                            }
                                        echo"</select>";
                                    echo"</td>";
                                    echo"<td>";
                                        echo"<div id='niveau2' style='display:inline'>";
                                            echo"<select name='niveau2'id='niveau2' onclick='go_Niveau2()'STYLE='width:200'>";
                                                echo"<option value='-1'>-</option>";
                                            echo "</select>";
                                       echo"</div>";
                                    echo"</td>";
                                    echo"<td>";
                                        echo"<div id='niveau3' style='display:inline'>";
                                            echo"<select name='niveau3'id='niveau3' STYLE='width:200'>";
                                                echo"<option value='-1'>-</option>";
                                            echo "</select>";
                                        echo"</div>";
                                    echo"</td>";
                                echo"</tr>";
                            echo"</table>";
                        echo"</div>";

ajaxNiveau1:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau2'id='niveau2' STYLE='width:200'>";
        if(isset($_POST["ID_N1"])){
            $sql="SELECT DISTINCT combinaison.ID_N2, niveau2.NOM_N2
                  FROM niveau2, combinaison
                  WHERE ID_N1 = ".$_POST["ID_N1"]."
                  AND combinaison.ID_N2 = niveau2.ID_N2
                  ORDER BY NOM_N2";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N2"]."'>".$row["NOM_N2"]."</option>";
            }
        }
echo "</select>";
FermerBD( $connection );
?>

ajaxNiveau2:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau3'id='niveau3' STYLE='width:200'>";
        if(isset($_POST["ID_N2"])){
            $sql="SELECT DISTINCT combinaison.ID_N3, niveau3.NOM_N3
                  FROM niveau3, combinaison
                  WHERE ID_N2 = ".$_POST["ID_N2"]."
                  AND combinaison.ID_N3 = niveau3.ID_N3
                  ORDER BY NOM_N3";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N3"]."'>".$row["NOM_N3"]."</option>";
            }
        }
echo "</select>";
FermerBD( $connection );
?>

**andry.aime** · 09/09/2010, 16h07

Bonjour,
Un id doit être unique.

echo"<div id='niveau2' style='display:inline'>";
echo"<select name='niveau2'id='niveau2' onchange='go_Niveau2()'STYLE='width:200'>";

A+.

**Canyata** · 10/09/2010, 08h55

J'ai donc modifié mon code comme tu me l'as dit mais rien n'y fait

Dans le go_Niveau2() lors du onchange sur le select niveau2, il devrait y avoir une alert qui pop pour bien verif le changement et elle ne me pop pas

Quelqu'un sait pourquoi?

S'il ne detecte pas le onchange sur le select 2 il ne peut pas lancer go_Niveau2

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
<script type='text/javascript'>
    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest) // Firefox et autres
            xhr = new XMLHttpRequest();
        else if(window.ActiveXObject){ // Internet Explorer
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        else { // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
            xhr = false;
        }
        return xhr;
    }
    function go_Niveau1(){
        var xhr = getXhr();
        // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function(){
            // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState == 4 && xhr.status == 200){
                leselect = xhr.responseText;
                // On se sert de innerHTML pour rajouter les options a la liste
                document.getElementById('niveau2').innerHTML = leselect;
            }
        }
 
        // Ici on va voir comment faire du post
        xhr.open("POST","vue/ajaxNiveau1.php",true);
        // ne pas oublier ça pour le post
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // ne pas oublier de poster les arguments
        // ici, l'id de l'auteur
        sel = document.getElementById('niveau1');
        idniveau1 = sel.options[sel.selectedIndex].value;
        xhr.send("ID_N1="+idniveau1);
    }
    function go_Niveau2(){
        var xhr = getXhr();
        // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function(){
            // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
            if(xhr.readyState == 4 && xhr.status == 200){
                leselect = xhr.responseText;
                // On se sert de innerHTML pour rajouter les options a la liste
                document.getElementById('niveau3').innerHTML = leselect;
            }
        }
 
        // Ici on va voir comment faire du post
        xhr.open("POST","vue/ajaxNiveau2.php",true);
        // ne pas oublier ça pour le post
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // ne pas oublier de poster les arguments
        // ici, l'id de l'auteur
        sel = document.getElementById('niveau2');
        idniveau2 = sel.options[sel.selectedIndex].value;
        alert('Youhou');
        xhr.send("ID_N2="+idniveau2);
    }
</script>
<?php
echo"<select name='niveau1' id='niveau1' onchange='go_Niveau1()'STYLE='width:200'>";
    echo"<option value='-1'>Choisir un type de panne</option>";
    $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
    $result = mysql_query($sql);
    while ($row = mysql_fetch_assoc($result)) {
        echo "<option value='" . $row["ID_N1"] . "'>" . $row["NOM_N1"] . "</option>";
    }
echo"</select>";
echo"<div id='niveau2' style='display:inline'>";
    echo"<select name='niveau2' onchange='go_Niveau2()'STYLE='width:200'>";
        echo"<option value='-1'>-</option>";
    echo "</select>";
echo"</div>";
echo"<div id='niveau3' style='display:inline'>";
    echo"<select name='niveau3' STYLE='width:200'>";
        echo"<option value='-1'>-</option>";
    echo "</select>";
echo"</div>";
?>

**Bovino** · 10/09/2010, 10h00

Code :

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

<select name='niveau2'id='niveau2' onchange='go_Niveau2()'STYLE='width:200'>

Essaye déjà d'avoir un minimum de rigueur au niveau de l'écriture du code :

Code :

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

<select name='niveau2' id='niveau2' onchange='go_Niveau2()' style='width:200px'>

**Canyata** · 10/09/2010, 11h17

Oups désolé, erreur de débutant ....

Il faut que j'y pense j'ai corrigé desuite merci

**Canyata** · 10/09/2010, 13h15

Je rajoute une info, après avoir placé des alertes dans la fonction go_Niveau2(),

mon xhr.readyState reste toujours a 1 et non a 4 en terminer :s

Quelles peuvent être les causes?

**andry.aime** · 10/09/2010, 14h35

Re,
Peut-on voir ton code actuel?
As-tu bien respecter les id?

A+.

**Canyata** · 15/09/2010, 11h04

Désolé du retard .....

Voici le code

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
 
<script type='text/javascript'>
            var xhr = null;
            function getXhr(){ 
                if(window.XMLHttpRequest) // Firefox et autres
                    xhr = new XMLHttpRequest();
                else if(window.ActiveXObject){ // Internet Explorer
                    try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }
                else { // XMLHttpRequest non supporté par le navigateur
                    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                    xhr = false;
                }
                return xhr;
function go_Niveau1(){
                getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    alert(xhr.readyState);
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('niveau2').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau1.php",true);
                // ne pas oublier ça pour le post
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                sel = document.getElementById('niveau1');
                idniveau1 = sel.options[sel.selectedIndex].value;
                xhr.send("ID_N1="+idniveau1);
            }
            function go_Niveau2(){
                //alert('Youhou10');//oui
                getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function(){
                    //alert('Youhou12'); //Oui
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    alert(xhr.readyState);
                    //alert(xhr.status);
                    if(xhr.readyState == 4 && xhr.status == 200){
                        alert('Youhou13');
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('niveau3').innerHTML = leselect;
                    }
                }
                //alert('Youhou14');//oui
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau2.php",true);
                // ne pas oublier ça pour le post
                //alert('Youhou15');//oui
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // ne pas oublier de poster les arguments
                // ici, l'id de l'auteur
                //alert('Youhou16');//oui
                sel = document.getElementById('niveau2');
                //alert('Youhou17');//oui
                idniveau2 = sel.options[sel.selectedIndex].value;
                alert('Youhou20');
                xhr.send("ID_N2="+idniveau2);
            }
        </script>
<body>
echo"<table>";
    echo"<tr>";
        echo"<td>";
            echo"<select name='niveau1' id='niveau1' onchange='go_Niveau1()'style='width:200px'>";
                echo"<option value='-1'>Choisir un type de panne</option>";
                $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
                $result = mysql_query($sql);
                while ($row = mysql_fetch_assoc($result)) {
                    echo "<option value='".$row["ID_N1"]."'>".$row["NOM_N1"]."</option>";
                }
            echo"</select>";
        echo"</td>";
        echo"<td>";
            echo"<div id='niveau2' style='display:inline'>";
                echo"<select name='niveau2' onchange='go_Niveau2()' style='width:200px'>";
                    echo"<option value='-1'>-</option>";
                echo "</select>";
           echo"</div>";
        echo"</td>";
        echo"<td>";
            echo"<div id='niveau3' style='display:inline'>";
                echo"<select name='niveau3' style='width:200px'>";
                    echo"<option value='-1'>-</option>";
                echo "</select>";
            echo"</div>";
        echo"</td>";
    echo"</tr>";
echo"</table>";
</body>
            }

ajaxNiveau1:

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
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo"<select name='niveau2'onchange='go_Niveau2()' style='width:200px'>";
        if(isset($_POST["ID_N1"])){
            $sql="SELECT DISTINCT combinaison.ID_N2, niveau2.NOM_N2
                  FROM niveau2, combinaison
                  WHERE ID_N1 = ".$_POST["ID_N1"]."
                  AND combinaison.ID_N2 = niveau2.ID_N2
                  ORDER BY NOM_N2";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N2"]."'>".$row["NOM_N2"]."</option>";
            }
        }else{
            echo "<option value='-1'>"-"</option>";
        }
echo "</select>";
FermerBD( $connection );
?>

ajaxNiveau2:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau3 style='width:200px'>";
    if(isset($_POST["ID_N2"])){
            $sql="SELECT DISTINCT combinaison.ID_N3, niveau3.NOM_N3
                  FROM niveau3, combinaison
                  WHERE ID_N2 = ".$_POST["ID_N2"]."
                  AND combinaison.ID_N3 = niveau3.ID_N3
                  ORDER BY NOM_N3";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N3"]."'>".$row["NOM_N3"]."</option>";
            }
    }else{
            echo "<option value='-1'>"-"</option>";
        }
echo "</select>";
FermerBD( $connection );
?>

Dans le script, les //alert('Youhou14');//oui veulent dire que je vois l'alert.

Lors du remplissage de la première liste, le alert(xhr.readyState); passe bien à 1 puis à 2 puis à 3 et enfin 4. Lors de la modification de la deuxième liste box il reste bloqué à 1

**andry.aime** · 15/09/2010, 11h39

Re,

sel = document.getElementById('niveau2');

echo"<select name='niveau2'onchange='go_Niveau2()' style='width:200px'>";

1-C'est un div qui a un id = "niveau2" mais pas un select.
2-N'utilise pas le même valeur pour un id et un name pour différents éléments parceque IE les confond.
3-Tes select générés n'ont pas d'id.

A+.

**Canyata** · 15/09/2010, 12h25

J'ai pas tout compris

Je dois donc mettre un id sur le div mais pas sur le select?

Je vais differencier les names et les id aussi

Merci

**andry.aime** · 15/09/2010, 12h48

Tu dois faire un truc de ce genre

Code php :

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

1
2
 echo"<div id='niveau2Div' style='display:inline'>";
                echo"<select name='niveau2' id='niveau2'  onchange='go_Niveau2()' style='width:200px'>";

A+.

**Canyata** · 15/09/2010, 12h57

Merci beaucoup je vais essayé

**Canyata** · 15/09/2010, 13h06

Parfait

Un grand merci a vous tous

[AJAX] Onchange() avec select

AJAX

Discussions similaires

Partager

Partager