Bonjour,
Je souhaite faire 2 listes déroulantes liées dynamiquement.
D'où l'emploi de l'ajax et de la librairie prototype pour essayer de faciliter les choses.
Voilà mon code:
Le premier fichier index.php
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
- <head>
- <title>Socle</title>
- <meta http-equiv="content-language" content="fr" />
- <meta http-equiv="content-Type" content="text/html;charset=iso-8859-15" />
- <meta name="robots" content="noindex" />
- <style type="text/css">
- body {
- background-color: #D4EAFA;
- color: #000066;
- }
- input {
- background-color: #fff;
- }
- a {
- text-decoration:none;
- }
- a:hover{
- text-decoration:none;
- }
- p {
- margin:0;
- padding:0;
- }
- </style>
- <script type="text/javascript" src="mesfonctions.js"></script>
- <script type="text/javascript" src="lib/prototype.js"></script>
- </head>
- <body>
- <?php
- $table1='classe';
- $table2='socle';
- $table1_champ1='classe';
- $table2_champ1='classe';
- $table2_champ2='eleve';
- include ('connexion.php');
- //==========================================
- //== on affiche dans un select la TABLE 1 ==
- //==========================================
- $res=mysql_query("SELECT * FROM $table1" );
- $max=@mysql_num_rows($res);
- ?>
-
-
-
- <form method = "post" name = "socle" action="socle.php">
- <p align ="center" >Socle</p>
- <p> </p>
- <p align = "center">
- <select onChange="requete_ajax();" size="1" id="tb1" >
- <?php
- for ($nb=0;$nb<$max;$nb++)
- { $i=mysql_result($res,$nb,$table1_champ1);
- echo '<option>'.$i.'</option>';
- }
- ?>
- </select>
- <select name="eleve" id="emplacement" size=1> </select>
- </p>
- <p> </p>
- <p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
- </form>
- </body>
- </html>
|
Le fichier .js où est fait l'appel ajax:
Code :
- function requete_ajax() {
- var valeur = document.getElementById("tb1" ).value;
- alert (valeur);
- var parametres = 'classe='+valeur;
- var myAjax = new Ajax.Updater( 'emplacement' , 'remplir2ndselect.php' , { method: 'get', parameters: parametres } );
- }
|
Je ne poste pas le fichier appelé par le .js pour remplir le 2nd select car le problème ne se situe pas ici.
Le problème est sur la ligne:
var valeur = document.getElementById("tb1" ).value;
Sur Firefox, pas de souci, le alert renvoie la bonne valeur choisie dans le 1er select.
Mais, sous IE, ça bugge: le alert ne renvoie rien!!!
Une idée ? (sachant que je suis une bille en javascript et que j'ai ptet laissé passer une grosse boulette).
Message édité par fabulon le 23-12-2009 à 21:05:02