Discussion :

[stefano]

bonjour a tous,

je génère une liste déroulante à partir du choix fait dans une liste précédente.
(J'ai suivi le tuto du site http://siddh.developpez.com/articles/ajax/#LIV-A)

jusque là tout fonctionne parfaitement, par contre je souhaiterai récupère la valeur sélectionnée dans la liste dynamique comment puis-je faire ?

la liste dynamique est mise dans une div qui se nomme id="her2"
la liste par elle même s’appelle c'est id="her21"

voila ce que j'ai dans mon fichier.js

Code :

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

1
2
3
 
selHER2 = document.getElementById('HER21');
    herdeux = selHER2.options[selHER2.selectedIndex].value;

ce qui me donne des erreurs

selHER2 valeur null
herdeux : objet requis

si je fait

Code :

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

1
2
3
 
selHER2 = document.getElementById('HER2');
    herdeux = selHER2.options[selHER2.selectedIndex].value;

j'obtient ceci comme erreur

Erreur : 'selHER2.options' a la valeur Null ou n'est pas un objet

Merci par avance pour votre aide

[SpaceFrog]

Sans voir le code html ? difficiel de dire

Code :

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

selHER2 = document.getElementById('HER21');

tu es sur d'avoir un id HER21 sur ta page ?

[Bovino]

Euh... tu cherches les options d'une div toi ?

Sinon, la notation

Code :

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

herdeux = selHER2.value;

est tout aussi correcte (enfin... si selHER2 correspond à un select bien sûr...)

[SpaceFrog]

Code :

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

1
2
selHER2 = document.getElementById('HER21');
selHER2 = document.getElementById('HER2');

21 ou 2 ???

[stefano]

oui, j'ai bien mon select avec un id='HER21'

Bovino
Oui moi aussi ça m'as paru bizarre, mais dans le tuto il est fait mention de ceci

C'est un code minimaliste qui ne contient pas tous les contrôles, notamment au niveau php mais cela permet de se faire une petite idée.
Si on doit mettre le select dans un div et faire un innerHTML dessus, c'est car Internet Explorer ne gère pas les innerHTML dans un select.

Donc j'ai suivi bêtement ce qui était écrit, mais j'ai testé sans la div et l'affichage de la seconde liste ne se fait pas.
J'ai tester aussi ta proposition herdeux=her21.value, mais ça fonctionne pas puisque HER2=null lorsque je fais du pas à pas pour débugger.


Pour ce qui est du select c'est id='HER21' et la div id='2'

[SpaceFrog]

montre nous plutot le code source de ta page ...

[stefano]

Je vous mets les morceau de code concerné

v_identification.php

Code php :

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
 <div class="control-group">
    <label class="control-label"> HydroEcoRégion 1</label>
    <div class="controls">
        <select id="HER1" name="HER1" class="input-xlarge" onchange="her()">
            <option>choix...</option>
<?php
// affiche la dernière ligne utiliser dans la liste
foreach ($_SESSION['HER1'] as $value) {
    echo '<option value="' . $value['code'] . '">' . $value['libelle'] . '</option>';
}
?>
        </select>
    </div>
</div>
<!-- Select Basic -->
<div class="control-group">
    <label class="control-label">HydroEcoRégion 2</label>
    <div class="controls" id="HER2">
        <select id="HER21"  class="input-xlarge">
            <option>Choix...</option>
        </select>
    </div>
</div>

fichier.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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function ajoutTable() {
    var xhr = getXhr();
    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('tableRecap').innerHTML = leselect;
        }
    }
    url = "./classes/librairie/traitement.php";
 
    // Ici on va voir comment faire du post
    xhr.open("POST", url, true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
    // Nom de la station
    selStation = document.getElementById('station').value;
 
    // sélection d'hydroEcoRégion de niveau 1
    selHER1 = document.getElementById('HER1');
    her1 = selHER1.options[selHER1.selectedIndex].value;
 
    // sélection d'hydroEcoRégion de niveau 2
    selHER2 = document.getElementById('HER2');
    herdeux = selHER2.options[selHER2.selectedIndex].value;
 
    // sélection de la catégorie
    selCategorie = document.getElementById('categorieTaille');
    categorie = selCategorie.options[selCategorie.selectedIndex].value;
    liste = "station=" + selStation + "&her1=" + her1 + "&her2=" + herdeux + "&categorie=" + categorie;
 
    xhr.send(liste);
}

fichier traitement.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
$req = "SELECT * FROM hersecondniveau WHERE HERPremierNiveau_code=" . $_POST['her1'];
    $resultat = $pdo->requeteSelection($req);
    echo '  <select name="HER21">';
    if (isset($resultat)) {
// affiche la dernière ligne utiliser dans la liste
        foreach ($resultat as $value) {
            echo '<option value="' . $value['code'] . '" selected="selected">' . $value['libelle'] . '</option>';
        }
    }
    echo'</select>';

En retapant le code, je viens de m'apercevoir de la boulette que j'ai fait.
je fais un getElementById sur un select qui n'as pas de id mais un name.
Error Fatal de copier coller.

Ca me semble être correct, maintenant désoler pour le dérangement comme quoi revenir sur un pb après le déjeuner on voir mieux ses bétises.

Merci quand même d'avoir pris le temps de me répondre.

bonne journée a vous

[SpaceFrog]

Aujourd'hui 10h46

tu es sur d'avoir un id HER21 sur ta page ?