Plusieurs Select multiple liées + Ajax

Résolu
Coutcout86 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention   -  
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   -
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.

3 réponses

Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
0
Coutcout86 Messages postés 195 Date d'inscription   Statut Membre Dernière intervention  
 
Et je passe mon tableau en POST ?

Merci d'avance.
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
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
0