Système de liste dynamique

**DonKnacki** · 25/06/2010, 14h44

Bonjour à tous,
Débutant en javascipt, je ne sais pas trop comment réaliser ce que je souhaite. C'est pourquoi je me tourne vers vous pour avoir de l'aide.

Mon souhait:
J'aimerai avoir une première liste d' objet(que je vais appelé liste1 pour la compréhension du problème) que l'on peut sélectionner via des cases à cochées.
Un bouton Valider nous permettrait ensuite d'avoir la liste (liste2),sous forme de puce par exemple, d'objets que l'on a coché.
Chacun de ces objets pourrait être supprimable et on pourrait, via un lien "Ajouter", ajouter de nouveaux objets. En cliquant sur le bouton "Ajouter", on se retrouverai alors avec la liste1 et les cases des objets présent dans la listes2 seraient cochées.
Dernière chose, j'aimerai que si des objets ont déjà sélectionnés, on visualise la liste2 sinon on visualise la liste1

Ce que j'ai déjà fait :

La liste1 (c'est du html, c'était pas compliqué )
Savoir si une case est coché ou non en javascript(cf le code ci dessous)

Code html :

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
<script>
function CasesCochees()
{
        var nbCaseCochees = 0;
        for (i=0;i< document.getElementsByName("box").length;i++)
        {
                if(document.getElementsByName("box").item(i).checked)
                {
                        nbCaseCochees ++; 
                        alert(document.getElementsByName("box").item(i).id);
                }
        }
        if(nbCaseCochees > 0)
                document.getElementById("WeaponList").style.display = 'none';
}
</script>
<body onLoad="javascript:CasesCochees()" >
 
	<div id="WeaponList">
		<input type="checkbox" name="box" id="Epée"/><label>Epée</label>
		<input type="checkbox" name="box" id="Fauche"/><label>Fauche</label>
		<input type="checkbox" name="box" id="Batte"/><label>Batte</label>
		<input type="submit" onclick="javascript:CasesCochees()" value="Valider" />
	</div>
</body>

**DonKnacki** · 25/06/2010, 16h15

j'ai avancer un peu: une fois des objets choisis, j'ai bien la liste2 à jour.
Le problème est que lorsque je rafraichi la page , je reviens à la liste1. Je souhaiterai rester sur la liste2 et revenir à ma liste1 uniquement si la liste2 est vide ou si on clique sur ajouter

Code html :

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
<script>
function WeaponsList()
{
        var nbCaseCochees = 0;
        var progs = new Array(); 
        for (i=0;i< document.getElementsByName("box").length;i++)
        {
                if(document.getElementsByName("box").item(i).checked)
                {
                        Weapons[nbCaseCochees] = document.getElementsByName("box").item(i).id;
                        nbCaseCochees ++; 
                }
        }
        return Weapons;
        
}
function update()
{
        var weapons= new Array();
        weapons = WeaponsList();
        if(weapons.length != 0)
        {
                var chaine = '<ul>'
                for (i=0;i< progs.length;i++)
                {
                        chaine = chaine + '<li>'+weapons[i]+'</li>';
                }
                chaine = chaine + '</ul><p><a href="#">Ajouter une arme </a></p>';
                document.getElementById("WeaponsList").innerHTML= chaine;
                
        }
}
</script>
<body onLoad="javascript:update()" >
 
	<div id="WeaponsList">
		<input type="checkbox" name="box" id="Epée"/><label>AGIRA</label>
		<input type="checkbox" name="box" id="Fauche"/><label>Clarity</label>
		<input type="checkbox" name="box" id="Batte"/><label>Flottes</label>
		<input type="submit" onclick="javascript:update()" value="Ajouter" />
	</div>
</body>

**DonKnacki** · 01/07/2010, 11h40

Bon tant pis, je ne proposerai pas cette fonctionnalité

Système de liste dynamique

JavaScript

Discussions similaires

Partager

Partager