Plusieurs Select multiple liées + Ajax Résolu

Question

Bonjour,

J'aimerais que l'on puisse m'aider sur des boîtes de liste liées et qui sont en plus multiple.
Voilà j'ai une boite de liste :


<select id="gfe" onchange="listDiplomeGFE(20092010)" name="gfe[]" multiple="multiple">

    <option value="0" name="nom_gfe[]"></option>
    <option value="GFE11" name="nom_gfe[]"></option>
    <option value="GFE12" name="nom_gfe[]"></option>
    <option value="GFE13" name="nom_gfe[]"></option>
    <option value="GFE14" name="nom_gfe[]"></option>
    <option value="GFE15" name="nom_gfe[]"></option>
    <option value="GFE16" name="nom_gfe[]"></option>
    <option value="GFE17" name="nom_gfe[]"></option>
</select>

Et j'aimerais construire une autre boite de liste multiple à partir des N valeurs que je récupére de ma boite de liste ci-dessus.

Et là j'ai un soucis, j'arrive à faire de l'AJAX avec des boites de liste toute simples mais lorsque je dois récupérer plusieurs valeurs d'une boite de liste multiple je n'y arrive pas.

Pour complément voici mon code ajax :


function listDiplomeGFE(periode){
  var xhr = getXhr();
  // On défini ce qu'on va faire quand on aura la réponse
  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){
      listeDiplome = xhr.responseText;
      // On se sert de innerHTML pour rajouter les options a la liste
      document.getElementById('diplome').innerHTML = listeDiplome;
    }
  }
  // Ici on va voir comment faire du post
  xhr.open("POST","ajax/ajaxGFEDiplome.php",true);
  // ne pas oublier ça pour le post
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // ne pas oublier de poster les arguments
  // ici, le nom du GFE ainsi que la periode
  sel = document.getElementById('gfe');
  idGFE = sel.options[sel.selectedIndex].value;
  //alert(idGFE);
  xhr.send("idGFE="+idGFE+"&periode="+periode);
}

Quelqu"un pourrait-il m'aider à résoudre ma problèmatique ?

Merci d'avance.

Afficher la suite

Pitet · Answer

Salut,

Tu dois parcourir la liste des options de ta liste et vérifier pour chacun si il est sélectionné. Si c'est le cas tu stocke sa valeur dans un tableau que tu transmettra via ta requête ajax.

Bonne journée

Coutcout86 · Answer

Et je passe mon tableau en POST ?

Merci d'avance.

Pitet · Answer

Non avec l'objet XHR natif tu doit également sérialiser tes données comme tu l'as fait pour la méthode xhr.send().

Voici un exemple possible à partir du moment où tu as récupérer le tableau des options sélectionnées :

var optionsSelected = ['GFE11', 'GFE14', 'GFE15', 'GFE21'];

var paramsGFE = 'gfe[]=' + optionsSelected.join('&gfe[]=');

console.log(paramsGFE); // gfe[]=GFE11&gfe[]=GFE14&gfe[]=GFE15&gfe[]=GFE21

Plusieurs Select multiple liées + Ajax

3 réponses

Votre réponse

Discussions similaires