[AJAX] update Select via Checkbox & Ajax

Version imprimable

13/05/2009, 22h51
fox59

[AJAX] update Select via Checkbox & Ajax

Bonjour a tous
j'ai un truc un peu tordu a faire, et je pense que l'Ajax peut le faire, mais je suis pas un pro en Ajax, loin de la

- J'ai une liste de checkbox (generé via bdd, chacune ayant son id)
- en dessous j'ai un select multiple vide
- Je souhaiterais ajouter des options a ce select lors de la sélection d'un checkbox, et que si je clic sur une autre check, ca ajouter également des lignes aux précédentes.
- par contre si je deselectionne une bos, il faudrairt retirer les option du select lui correspondant, tout en laissant les autres

sachant que toute les infos sont en bdd
- id des checkbox = id_type
- id des options = id_artisant relative a id_type

C'est clair, ou même comme ca c'est compliqué ?
merci de votre aide :)

Si tu n'as pas des tonnes d'infos (et cela semble le cas car sinon tu ne remplirais pas une simple liste), tu n'as pas spécialement besoin d'utiliser AJAX.
Pourquoi, lors de la génération de ta page, ne pas plutôt remplir un simple tableau javascript du style:

Code:

1
2
3
4
5
6
 
    var info= {"id01":"info checkbox1",
               "id02":"info checkbox2",
               "id03":"info checkbox3",
               "id04":"info checkbox4"
              };

Tu peux facilement le générer en PHP ou autre, c'est une ligne de code pour serializer en JSON.

Ensuite, lors du clic sur la checkbox, récupère son id, pioche l'information associée dans le tableau et ajoute l'élément à ton select.

Soit par exemple ce type de code:

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
39
40
41
42
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
    var info= {"id01":"info checkbox1",
               "id02":"info checkbox2",
               "id03":"info checkbox3",
               "id04":"info checkbox4"
              };
 
   function manageList(chk) {
     var sel =document.getElementById('sel');
     //si c'est coché on ajoute l'option (on met comme value l'id de la checkbox
    //c'est ajustable !
     if (chk.checked) {
        var option = new Option(info[chk.id],chk.id);
        sel.options[sel.length] = option;
     }
     //et si c'es décoché, on cherche l'élément de la liste à supprimer
     //recherche par son id précédemment instauré
     else { 
      for (var i = 0; i<sel.length ; i++) {
        if (sel.options[i].value==chk.id) {
           sel.remove(i);
           break;
        }
      }
     }   
   }
  </script>
 
  </head>
  <body>
  <select id="sel">
  </select>
  <input type="checkbox" id="id01" onclick="manageList(this);"/>
  <input type="checkbox" id="id02" onclick="manageList(this);"/>
  <input type="checkbox" id="id03" onclick="manageList(this);"/>
  <input type="checkbox" id="id04" onclick="manageList(this);"/>
  </body>
</html>

ERE

14/05/2009, 10h49
fox59

Merci pour cette piste
Mais pour chaque id_type, je peut avoir plusieurs id_artisant qui seront classé via optgroup
Pour finir, je doit pouvoir faire ma sélection multiple pour enregistrer les artisants choisi dans ma bdd

Grand merci