Récuperation valeur d'un Select modifié dynamiquement sous Explorer

Récuperation valeur d'un Select modifié dynamiquement sous Explorer - HTML/CSS - Programmation

Marsh Posté le 26-03-2009 à 14:58:46    

Bonjour,
J'ai sur ma page Web plusieurs Select liés entre eux (liste deroulante dynamique classique). Sur la première, on choisit un Pays, la seconde une Region, la troisième une Ville.
 
Lorsque l'on choisit un pays, disons la France, j'appel via une fonction Ajax la page PHP (ici ajax_region.php) permettant de recuperer dans ma base de donnée l'ensemble des région de France et de d'actualiser le select Region.
 
Meme chose ensuite lorsque l'on selectionne une des region affichée pour les villes.
 
Mon code fonctionne très bien sur Firefox mais ne fonctionne sur Explorer que lors de la selection d'un pays (le select du pays n'est pas modifié). Donc en gros, je n'arrive pas à recuperer la Value d'un select modifié dynamiquement par Ajax sous Explorer... Sauriez vous comment contourner ce probleme?
 
Merci d'avance
 
Code html de départ:
 
<span class="element_filtre">
  <label>Pays</label>
    <select name="pays" id="pays" onchange="go_pays()">
     <option id="pays" value='-1' selected="selected">Choisir un pays</option>
     <?php
      mysql_connect("localhost","root" );
      mysql_select_db("mess" );
      $res = mysql_query("SELECT * FROM pays ORDER BY id" );
      while($row = mysql_fetch_assoc($res)){
       echo "<option value='".$row["pays"]."'>".$row["pays"]."</option>";
      }
     ?>
    </select>
  </span>
  <span class="element_filtre">
  <label>Region</label>
    <span id="id_region" style="display:inline">
    <select id="region" name="region" onchange="go_region()">
     <option value='-1' selected="selected">Choisir un pays</option>
     <option value='Alsace' selected="selected">Alsace</option>
    </select>
    </span>
  </span>
  <span class="element_filtre">
  <label>Ville</label>
    <div id='id_ville' style='display:inline'>
    <select id="ville" name="ville" onchange="go_ville(this.value)">
     <option value='-1' selected="selected">Choisir un pays</option>
    </select>
    </div>
  </span>
 
 
 
Fonction ajax :
 
function go_pays() {
 
 var paraTag = $('#id_region');
    $(paraTag).children('#region').remove();
 
 sel = document.getElementById('pays');
 id_pays = sel.options[sel.selectedIndex].text;
 
 $.ajax({
            type: 'post',
            url: 'php/ajax_pays.php',
            data: 'pays=' + id_pays,
 
            success: function(results) {
                $(paraTag).html(results);
            }
  }); // end ajax
 $('#id_ville').children('#ville').remove();
 $('#id_ville').append("<select id='ville' name='ville'><option value='-1' selected='selected'>Choisir une région</option> </select>" );
 
}
 
function go_region() {
 
 var paraTag = $('#id_ville');
    $(paraTag).children('#ville').remove();
 
 sel = document.getElementById('region');
 id_region = sel.options[sel.selectedIndex].text;
 alert("region debut" );
 alert(id_region);
 
 $.ajax({
            type: 'post',
            url: 'php/ajax_region.php',
            data: 'region=' + id_region,
 
            success: function(results) {
                $(paraTag).html(results);
            }
  }); // end ajax
 $('#id_lieu').children('#lieu').remove();
 $('#id_lieu').append("<select id='lieu' name='lieu'><option value='-1' selected='selected'>Choisir une ville</option> </select>" );
 
}
 
Page ajax_pays.php :

 <?php
 header('Content-Type: text/html; charset=iso-8859-1');
 $pays=$_POST["pays"];
 if(isset($_POST["pays"])){
  echo "<select id='region' name='region' onchange='go_region()'>";
  echo "<option value='-1' selected='selected' >Choisir une région</option>";
  mysql_connect("localhost","root" );
  mysql_select_db("mess" );
  $res = mysql_query("SELECT DISTINCT region FROM wall WHERE pays='$pays' ORDER BY region" );
  while($row = mysql_fetch_assoc($res)){
   echo "<option value='".$row["region"]."'>".$row["region"]."</option>";
  }
 }
 echo "</select>";
?>
 
Page ajax_region.php :
 
<?php
 header('Content-Type: text/html; charset=iso-8859-1');
 $region=$_POST["region"];
 if(isset($_POST["region"])){
  echo "<select id='ville' name='ville' onchange='go_ville()'>";
  echo "<option value='-1' selected='selected'>Choisir une ville</option>";
  mysql_connect("localhost","root" );
  mysql_select_db("mess" );
  $res = mysql_query("SELECT DISTINCT ville FROM wall WHERE region='$region' ORDER BY ville" );
  while($row = mysql_fetch_assoc($res)){
   echo "<option value='".$row["ville"]."'>".$row["ville"]."</option>";
  }
  echo "<option value='Autres'>Autres</option>";
 }
 echo "</select>";
?>

Reply

Marsh Posté le 26-03-2009 à 14:58:46   

Reply

Marsh Posté le 26-03-2009 à 16:16:43    

Pour informations, voici le code que j'utilise pour gérer une liste déroulante avec Ajax, et qui fonctionne avec IE ou Firefox :

<?php
 
// ===========================================================================
// Test Ajax
// ===========================================================================
$form = <<<eod
<html>
<head>
 
<script type="text/javascript">
function populateSelect(url)
{
  var theSelect = document.getElementById('theSelect');
  theSelect.length = 0;
 
  var xmlHTTP;
  try{xmlHTTP = new XMLHttpRequest();}
  catch(e) {
    try{xmlHTTP = new ActiveXObject("Msxml2.XMLHTTP" );}
    catch(e) {
      try{xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP" );}
      catch(e) {
        alert("Your browser does not support AJAX!" );
        return false;
      }
    }
  }
 
  xmlHTTP.open('GET', url, true);
  xmlHTTP.send(null);
  xmlHTTP.onreadystatechange = function() {
    if (xmlHTTP.readyState == 4) {
      var theOptions = xmlHTTP.responseText;
      theOptions = theOptions.split(';');
      for (i = 0; i < theOptions.length; i++) {
        theSelect.options[i] = new Option(theOptions[i], theOptions[i]);
      }
    }
  }
}
</script>
</head>
<body>
<form>
<select id="theSelect">
<option value=1>un</option>
<option value=2 selected>deux</option>
</select>
 <input type="button" onclick="populateSelect('testajax1.php')" value="Update List of values" />
</form>
<p>
 
</body>
</html>
eod;
print($form);
 
?>


<?php
header("Cache-Control: no-cache, must-revalidate" );
 // Date in the past
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
printf("one;two;three" );
?>

Reply

Marsh Posté le 26-03-2009 à 16:51:55    

Merci mais mon code genere bien les select dynamiquement. Le probleme reside dans la recuperation de la valeur selectionné dans un select lui meme genéré dynamiquement par la selection d'une premiere valeur (dans mon exemple, le choix d'un pays genere une liste de region dynamiquement, et c'est lors du choix d'une de ces regions qu'IE ne recupere pas la value correctement...)

Reply

Marsh Posté le 26-03-2009 à 17:47:20    

A la place de

id_pays = sel.options[sel.selectedIndex].text;

essayer

id_pays = sel.options[sel.selectedIndex].value;


Reply

Marsh Posté le 26-03-2009 à 17:49:34    

J'ai malheureusement deja essayé sans succés cette option... Par contre c'est bel et bien sur cette ligne que semble se situer le probleme.

Reply

Marsh Posté le 26-03-2009 à 17:53:10    

Alors peut-être, au lieu de

sel = document.getElementById('pays');

avoir

var sel = document.getElementById('pays');


Reply

Marsh Posté le 27-03-2009 à 09:50:43    

Malheuresement, ce la ne change rien, cela ne marche toujours pas avec Explorer alors que cela marche sans problème avec Firefox

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed