Plusieurs Select multiple liées + Ajax

Résolu/Fermé
Coutcout86 Messages postés 195 Date d'inscription lundi 23 novembre 2009 Statut Membre Dernière intervention 26 mai 2016 - 9 juil. 2014 à 10:20
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 9 juil. 2014 à 12:20
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 lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
9 juil. 2014 à 11:53
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 lundi 23 novembre 2009 Statut Membre Dernière intervention 26 mai 2016
9 juil. 2014 à 11:55
Et je passe mon tableau en POST ?

Merci d'avance.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
9 juil. 2014 à 12:20
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