[AJAX] update Select via Checkbox & Ajax

**fox59** · 13/05/2009, 22h51

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

**emmanuel.remy** · 14/05/2009, 00h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fox59** · 14/05/2009, 10h49

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

[AJAX] update Select via Checkbox & Ajax

AJAX

Discussions similaires

Partager

Partager