[AJAX] compatibilité liste déroulante liée avec Internet Explorer IE
Bonjour,
je suis en train de développer un formulaire avec 2 listes déroulantes liées :
- La première liste déroulante avec les pays
- La seconde liste est dynamique. Elle affiche les villes du pays choisi précédemment
Mon code marche parfaitement avec Firefox, mais dans IE, quand on a choisi un pays (ici la France), la liste déroulante des villes reste vide.
Avec Firefox :
http://www.merlette.fr/firefox.jpg
Avec IE :
http://www.merlette.fr/explorer.jpg
Voici le code HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <td align="left" class="Style4">Mon pays de résidence</td>
<td align="left" valign="middle" class="Style4">
<?php lister('pays','nom_pays');?>
</td>
</tr>
<tr>
<td align="left" class="Style4">Ma ville de résidence</td>
<td align="left" valign="middle" class="Style4"><select name="id_ville" id="id_ville" style="width:200px">
<?php
echo '<option value="0"';
echo '>choisissez un pays</option>';
echo '</select>';
?>
</td>
</tr> |
lister.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
| <?php
function lister ($table,$nomchamp) {
$requete = "select $nomchamp from $table order by $nomchamp";
$resultat = mysql_query($requete) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
echo '<select name="'.'id_'.$table.'" id="'.'id_'.$table.'" style="width:200px" onchange="go()">';
echo '<option value="0"';
if(!isset($_POST['id_'.$table])) { echo 'selected=\"selected\"';}
echo '>choisissez...</option>';
$i = 1;
while ($ligne = mysql_fetch_array($resultat)) {
echo '<option value="'.$i.'"';
echo '>'.$ligne[$nomchamp].'</option>';
$i++;
}
echo'</select>';
}
?> |
lister_villes.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
| <?php
if(isset($_POST["id_pays"])){
require_once 'connectbdd.php';
require_once 'donne_pays.php';
$pays = $_POST["id_pays"];
$pays = donne_pays($pays);
require_once 'connectbdd.php';
$resultat = mysql_query('SELECT nom_ville FROM '.$pays.'_villes'.' ORDER BY nom_ville')
or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
$i = 1;
while ($ligne = mysql_fetch_array($resultat)) {
echo '<option value="'.$i.'"';
echo '>'.$ligne['nom_ville'].'</option>';
$i++;
}
echo'</select>';
}
?> |
Partie Ajax :
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
36
37
38
| 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 {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
}
function go(){
var xhr = getXhr();
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
document.getElementById('id_ville').innerHTML = leselect;
}
}
xhr.open("POST","lister_villes.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('id_pays');
idpays = sel.options[sel.selectedIndex].value;
xhr.send("id_pays="+idpays);
} |
Je crois qu'il faut mettre une balise div dans le code HTML mais j'ai essayé plusieurs solutions et ça ne fonctionne toujours pas.
Merci de votre aide
