Bonjour voilà tout est dans le titre j'ai 3 listes déroulantes liées, fonctionnant très bien sous Firefox mais pas sous IE. La raison est innerHtml qui n'est pas compatible avec IE. J'ai essayer plusieurs solutions comme Jquery avec $(#nondelabaliseselect).html ou OuterHTML qui ne fonctionne que pour lapremiere liste est non la 2nd. Peut-être que l'id n'est pas envoyé(alert de l'id selectionner non déclencher après l'avoir dé-commenté). Je suis tomber après sur les méthodes DOM mais là je sèche
Les versions des navigateurs utilisés sont Firefox 20 et IE 7.0.
Voici les parties de code concernées :
Partie JS :
Code :
- function go()
- {
- var xhr = getXhr();
- //creation d'une fonction qui s'executera à chaque changement d'etat
- xhr.onreadystatechange = function()
- {
- //readyState = Etat de l'objet utilisé exemple 4 => Prêt | status = Code réponse du serveur exemple 200 => OK
- if(xhr.readyState == 4 && xhr.status == 200)
- {
- //reponse retournée par le serveur au format texte
- leselect = xhr.responseText;
- //creation d'un objet html
- document.getElementById('antenne').innerHTML = leselect;
- }
- }
- xhr.open("POST","refreshAntennes.php",true);
- xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- sel = document.getElementById('service');
- //on recupere le choix de la premiere liste
- idservice = sel.options[sel.selectedIndex].value;
- //alert(idservice); //verif que la bonne valeur est stockée
- //on l'envoie pour adapter la seconde liste par la suite à partir de ce choix
- xhr.send("idservice="+idservice);
- }
|
partie HTML/PHP:
Code :
- <tr>
- <td>
- <label for='add_service_agent'>Service</label>
- </td>
- <td>
- <select name='service' id='service' onchange='go()'>
- <option value='-1'>--Choisir Service--</option>
- <?php
- include("include/connect.php" );
- $res = mysql_query("SELECT Id_service AS ids, Lib_service
- FROM SERVICE
- ORDER BY No_Service" );
- while($row = mysql_fetch_assoc($res))
- {
- echo "<option value='".$row["ids"]."'>".$row["Lib_service"]."</option>";
- }
- ?>
- </select>
- </td>
- </tr>
|
Code :
- <tr>
- <td><label for='add_antenne_agent'>Antenne</label></td>
- <td>
- <select name='antenne' id='antenne' onchange='go2()'>
- <option value='-1'>--Choisir Antenne--</option>
- </select>
- </td>
- </tr>
|
Dans cette exemple, on a un service et une antenne(appelé aussi sous-branche/section), lorsque je sélectionne un service on obtient la liste d'antennes correspondante. Pour ce faire :
- On fait appel à l'objet XMLHttpRequest qui s'occuper de mettre a jour cette liste a chaque changement de service.
- Dans la fonction JS go() on remarque que quelque chose est envoyé, c'est l'id du service sélectionner qui est envoyé via la méthode POST
- La page cible(refreshAntennes.php) contient une requête SQL qui va s’exécuter en prenant comme critère de recherche cette id.
- Enfin on récupère chacun des éléments dans la balises select qui a pour id : antenne.
Voilà j'espère avoir bien expliquer, merci d'avance et bonne journée
Message édité par furil le 02-08-2013 à 14:28:50