Trouver un element sélectionné

**Anduriel** · 25/03/2005, 21h19

Bon alors là je vais faire un truc super compliqué (pour moi) et je vais commencé par le 0 nul...

Voila donc j'ai un <select multiple>, deux boutons: "Ajouter élément" et "Retirer Element". Ensuite j'ai un Textarea READONLY.

Je voudrai que lorsque je selectionne dans le select un ou plusieurs éléments et que je clique sur Ajouter les noms de ces éléments s'affichent dans le textarea.

Voila je ne vous demande pas le code brut mais par ou je devrai commencer à chercher parceque je me vois mal tappé dans google ce que je viens de dire...

Merci

**ryan** · 26/03/2005, 14h49

Salut Anduriel,

Voici une ébauche de solution:

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
43
 
<html>
<head>
<script language="javascript">
function transferer()
{
for (i=0; i < document.forms[0].my_select.options.length; i++)
  {
  if(document.forms[0].my_select.options[i].selected)
    {
    document.forms[0].transit.value = document.forms[0].transit.value + document.forms[0].my_select.options[i].text;
    }
  }
}
 
function ajouter()
{
  document.forms[0].my_area.value = document.forms[0].my_area.value + document.forms[0].transit.value;
  document.forms[0].transit.value = '';
}
 
function vider()
{
  document.forms[0].my_area.value = '';
}
</script>
</head>
<body>
<form>
<select multiple name="my_select" onchange="transferer()">
<option>Un</option>
<option>Deux</option>
<option>Trois</option>
</select>
<input type=hidden name="transit" value="">
<br>
<input type=button value="Ajouter" onclick="ajouter()">
<input type=button value="Vider" onclick="vider()">
<br>
<textarea name="my_area"></textarea>
</form>
</body>
</html>

(certaines lignes sont coupées, il faudra certainement les reconstituer)

La fonction "transferer" copie les options sélectionnées dans le champ "transit", la fonction "ajouter" copie le contenu du champ "transit" dans le textarea, et, devine quoi, la fonction "vider" vide le textarea.

Pour la selection des options: il faut cliquer sur la première option à sélectionner et maintenir le bouton enfoncé en survolant les autres options à selectionner sinon il y aura des doublons.

Pour enlever une option, je ne vois pas trop comment faire.

En espérant que cela te mette sur la voie,
Yan

**Anduriel** · 26/03/2005, 15h32

Merci c'est génial !
C'est vraiment ce que je voulais a partir de ça je verrai ce que je fais et je poserai des questions

Merci

**Anduriel** · 26/03/2005, 18h25

Serait-ce possible d'au lieu mettre un textarea, je mette un autre select, comme ça, je pourrai envisager de re-selectionner dans celui-ci et de le supprimer.

Ton script comporte un problème: quand je selectionne plusieurs valeurs dans le select dans faire add, une fois que je fais add ca ajoute tout ce que j'ai selectionné avant.Je mexplique:

Je clique sur Un, puis sur Trois, puis sur Deux, puis sur Ajouter, et la ça me met UnTroisDeux.
Ce qu'il faudrait c'est à chaque change supprimer la valeur de transit. (je vais peut etre y arriver

Merci

**ryan** · 27/03/2005, 00h46

Re!

Ha bin voui, ce n'était qu'une ébauche de solution, mais j'ai creusé cette histoire...excellente occasion de refaire du javascript, que je commençais à oublier (surtout les regexp)

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<html>
<head>
<script language="javascript">
 
var str;
 
function remplir_selection()
{
str = "";
for (i=0; i < document.forms[0].my_select.options.length; i++)
  {
  if(document.forms[0].my_select.options[i].selected)
    {
    str = str + document.forms[0].my_select.options[i].text + "\r\n";
    }
  }
}
 
function vider_selection()
{
str = "";
for (i=0; i < document.forms[0].my_select.options.length; i++)
  {
    document.forms[0].my_select.options[i].selected = false;
  }
}
 
function ajouter()
{
  document.forms[0].my_area.value = document.forms[0].my_area.value + str;
  vider_selection();
}
 
function enlever()
{
  my_array = str.split("\r\n");
  for(i=0; i < my_array.length - 1; i++)
  {
    document.forms[0].my_area.value = document.forms[0].my_area.value.replace(my_array[i], "");
  }
  document.forms[0].my_area.value = document.forms[0].my_area.value.replace(/(\r\n){2,}/g, "\r\n"); 
  document.forms[0].my_area.value = document.forms[0].my_area.value.replace(/^(\r\n)/, ""); 
  vider_selection();
}
</script>
</head>
<body>
<form>
<select multiple name="my_select" onchange="remplir_selection()">
<option>Un</option>
<option>Deux</option>
<option>Trois</option>
</select>
<br>
<input type=button value="Ajouter" onclick="ajouter()">
<input type=button value="Enlever" onclick="enlever()">
<br>
<textarea name="my_area" rows=4></textarea>
</form>
</body>
</html>

On approche tout doucement d'une solution valable.

Il reste encore à empêcher de sélectionner plusieurs fois la même option.
Mais ce dimanche, je n'aurai pas le temps de regarder à cela: je remplis mon sac à dos et je m'en vais arpenter les côtes de Bretagne.
Et pour l'heure, il est tard, je baille à m'en décrocher la machoire.

A+,
Yan

**Anduriel** · 27/03/2005, 11h40

Merci ce code est encore mieux mais je voudrai savoir:
est-til possible de supprimer une option du select lors de l'ajout? (comme ça, l'utilisateur ne peut pas le choisri deux fois)

Merci

**ryan** · 27/03/2005, 13h57

Yop!

J'ai quelques munites de libre dans mes préparatifs...

Effacer du SELECT une option qui est déja dans le TEXTAREA, ce doit être possible, mais comment fais-tu alors pour enlever cette option du TEXTAREA si cette option n'est plus présente dans le SELECT?
Tu ne peux plus la séléctionner et cliquer sur le bouton "Enlever"

Il vaudrait mieux ne rien enlever du SELECT, mais plutôt faire un test pour voir si l'option selectionnée est déja dans le TEXTAREA et si oui, ne plus l'ajouter.

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
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
 
<html>
<head>
<script language="javascript">
 
var str;
 
function remplir_selection()
{
str = "";
for (i=0; i < document.forms[0].my_select.options.length; i++)
  {
  if(document.forms[0].my_select.options[i].selected)
    {
    str = str + document.forms[0].my_select.options[i].text + "\r\n";
    }
  }
}
 
function nettoyer()
{
document.forms[0].my_area.value = document.forms[0].my_area.value.replace(/(\r\n){2,}/g, "\r\n"); 
document.forms[0].my_area.value = document.forms[0].my_area.value.replace(/^(\r\n)/, ""); 
str = "";
for (i=0; i < document.forms[0].my_select.options.length; i++)
  {
  document.forms[0].my_select.options[i].selected = false;
  }
}
 
function ajouter()
{
my_array = str.split("\r\n");
for(i=0; i < my_array.length - 1; i++)
  {
  if (document.forms[0].my_area.value.indexOf(my_array[i]) >= 0)
    {
    str = str.replace(my_array[i],"");
    }
  }
document.forms[0].my_area.value = document.forms[0].my_area.value + str;
nettoyer();
}
 
function enlever()
{
my_array = str.split("\r\n");
for(i=0; i < my_array.length - 1; i++)
  {
  document.forms[0].my_area.value = document.forms[0].my_area.value.replace(my_array[i], "");
  }
nettoyer();
}
 
</script>
</head>
<body>
<form>
<select multiple name="my_select" onchange="remplir_selection()">
<option>Un</option>
<option>Deux</option>
<option>Trois</option>
</select>
<br>
<input type=button value="Ajouter" onclick="ajouter()">
<input type=button value="Enlever" onclick="enlever()">
<br>
<textarea name="my_area" rows=4></textarea>
</form>
</body>
</html>

Voilà qui devrait faire l'affaire.

A+
Yan

**Djtale** · 25/06/2008, 19h16

Bonjour, ce script convient quasiment à mes besoins.
J'ai essayé de le modifier mais je suis pas super doué en javascript.
Je cherche à remplacer le textarea par un autre select multiple et également laisser la possibilité de rajouter plus fois un éléement du select de gauche.

Que faut-il que je fasse pour cela ?

Merci beaucoup.

**Djtale** · 02/08/2008, 04h40

Bonjour, je ne sais pas pourquoi mais maintenant, lorsque je clique sur le bouton ajouter, ca n'a aucune action.
Sous Iexplorer, j'ai l'erreur suivante:
'document.forms.0.myarea' a la valeur Null ou n'est pas un objet

il ne me semble pas avoir modifié le code. Est ce que vous savez d'où ca peut venir, sachant que la ligne concernée est celle-ci:
document.forms[0].my_area.value = document.forms[0].my_area.value + str;
dans la méthode ajouter().

Merci beaucoup.

Trouver un element sélectionné

JavaScript

Vue hybride

Discussions similaires

Partager

Partager