Ajout dynamique div

**doudine** · 02/05/2007, 22h10

Bonjour,
Je cherche à ajouter à partir d'un combobox des lignes dans ma page...
1 bouton pour ajouter le choix.
1 autre pour supprimer la ligne ajoutée.

Est ce possible en javascript? existe t il déjà un outil?

Grand merci à tous!

**Auteur** · 02/05/2007, 23h48

bonjour,

tu peux regarder ici

**eyolas** · 03/05/2007, 09h26

si tu veux creer des élément et que ca marche sur ie et firefox utilise ceci http://wiki.script.aculo.us/scriptaculous/show/Builder

**doudine** · 13/05/2007, 14h29

en faite voila mon probleme:
Je veux une liste déroulante avec 2 boutons à cotés.
-> 1 bouton ajout qui ajoute le champ sélectionné.
-> 1 bouton qui efface toute la liste

A savoir que si un champ est déjà ajouter, il ne peut etre remis.

Dois je utiliser du javascript ou bien créer un composant java?

Merci pour vos conseils!

**Shinuza** · 13/05/2007, 16h02

Envoyé par eyolas

si tu veux creer des élément et que ca marche sur ie et firefox utilise ceci http://wiki.script.aculo.us/scriptaculous/show/Builder

Oui mais non

Y'a vraiment plus léger pour ce genre d'opérations, genre jQuery

**doudine** · 13/05/2007, 16h19

ok mais le lien que tu me donnes n'a pas d'exemple concret...
Et vu que j'ai du mal... montrer des morceau par ci par la ne m'aide pas très bien...

**Auteur** · 13/05/2007, 17h58

voici un exemple :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<html>
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
//caracteres autorisés
//exp1 = caracteres sans accents + nombres + espace
//exp2 = caracteres avec accents + nombres + espace
var exp1 = /[^a-z0-9 ]/gi;
var exp2 = /[^a-z0-9 âàäãêéèëîìïôòöõûùüÿç]/gi;
 
var tabAccents = new Array();
tabAccents[0] = "âàäãêéèëîìïôòöõûùüÿç";  //liste des caractères accentués (cf. ci-dessus)
tabAccents[1] = "aaaaeeeeiiioooouuuyc";  //equivalent sans accent
 
 
function analyseChamp(valeur, remplaceAccents)
{
 var i, n;
 
 valeur = valeur.toLowerCase(); //tout le chaine passe en minuscules
 
 if (remplaceAccents)
 {
    n = tabAccents[0].length;
    for (i=0; i<n; i++)
      valeur = valeur.replace(new RegExp(tabAccents[0].charAt(i),"g"),tabAccents[1].charAt(i));
      
    valeur = valeur.replace(exp1,"");
 }
 else
    valeur = valeur.replace(exp2,"");
 
 return valeur;
}
 
 
function ajouter()
{
 var i, option, valeur, ajout = true;
 
 var combo = document.getElementById("combo");
 var nOpt = combo.options.length;
 var txt = document.getElementById("idText").value;
 
 txt = analyseChamp(txt, false);
 valeur = analyseChamp(txt, true);
 
 if (txt.length<1)
 {
  alert("Champ vide !!");
 }
 else
 {
   if (nOpt>0)
   {
     for (i=0; i<nOpt; i++)
     {
        if (combo.options[i].value==valeur)
        {
           combo.options.selectedIndex = i;
           alert("Cette valeur existe !!");
           ajout=false;
        }
     }
   }
 
   if (ajout)
   {
     option = new Option(txt, valeur, false, false);
     combo.options.add(option);
   }
 }
 
}
 
 
function supprimer()
{
  var combo = document.getElementById("combo");
  var n = combo.options.selectedIndex;
 
  if (n>=0)
  {
     combo.remove(n);
  }
  else
  {
   alert("Selectionnez un champ à supprimer !!");
  }
}
 
//-->
</script>
 
 
 
</head>
 
<body>
 
<div>
  <input type="text" value="" id="idText" size="40" maxlength="30" />
  <br />
  <input type="button" value="Ajouter" id="idAjout" onclick="ajouter()"/>
  <input type="button" value="Supprimer" id="isSuppr" onclick="supprimer()" />
 
  <br />
  <select style="width: 130px" size="5" id="combo">
 
  </select>
</div>
 
 
</body>
 
</html>

Ce code ne passe pas la validation W3C car le select est initialement vide.

Pour la valeur du champ :

pas de distinction majuscules / minuscules

pour le contenu de option, j'applique cette expression régulière (cf. commentaire dans le code) :

Code javascript :

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

1
2
 
var exp2 = /[^a-z0-9 âàäãêéèëîìïôòöõûùüÿç]/gi;

pour le contenu de value, j'applique cette expression régulière (cf. commentaire dans le code) :

Code javascript :

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

1
2
 
var exp2 = /[^a-z0-9]/gi;

les caractères accentués sont remplacés par leur équivalent :

Code javscript :

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

1
2
3
4
 
var tabAccents = new Array();
tabAccents[0] = "âàäãêéèëîìïôòöõûùüÿç";  //liste des caractères accentués (cf. ci-dessus)
tabAccents[1] = "aaaaeeeeiiioooouuuyc";  //equivalent sans accent

Ajout dynamique div

JavaScript

Discussions similaires

Partager

Partager