Liste dynamique php

Version imprimable

25/10/2013, 10h39
stefano

Liste dynamique php
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:

1 2 3 selHER2 = document.getElementById('HER21'); herdeux = selHER2.options[selHER2.selectedIndex].value;
ce qui me donne des erreurs

Citation:

selHER2 valeur null
herdeux : objet requis

si je fait
Code:

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
25/10/2013, 10h46
SpaceFrog

Sans voir le code html ? difficiel de dire

Code:

selHER2 = document.getElementById('HER21');

tu es sur d'avoir un id HER21 sur ta page ?
25/10/2013, 10h47
Bovino

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

Sinon, la notation

Code:

herdeux = selHER2.value;

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

Code:

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

21 ou 2 ???

25/10/2013, 12h51
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

Citation:

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

Pour ce qui est du select c'est id='HER21' et la div id='2'
25/10/2013, 13h15
SpaceFrog

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

Je vous mets les morceau de code concerné

v_identification.php

Code:

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:

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:

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

25/10/2013, 14h24
SpaceFrog

Aujourd'hui 10h46

Citation:

Envoyé par Spacefrog

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