SELECT MULTIPLE et désélection

**richard_sraing** · 14/12/2009, 16h48

Bonjour tout le monde,

Alors voici un petit kwak auquel je suis confronté.

J'ai une liste de sélection multiple dans laquelle je permet à un utilisateur de sélectionner plusieurs catégories d'articles qu'il souhaite afficher.

Voilà à quoi ça ressemble :

Maintenant, lorsque l'utilisateur appuie sur le bouton "Réinitialiser tout les champs", les zones de textes se vident. J'aimerais également que les éléments sélectionnés dans la liste soient désélectionné (et une utopie serait également de ne plus afficher la valeur du filtre sans rechargement de préférence).

Voilà, alors j'ai essayer ceci:

Code JAVASCRIPT :

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

1
2
3
4
5
6
7
8
9
10
11
12
function clearInput(){
document.forms["Catalogue"].elements["DesiStart"].value = "";
document.forms["Catalogue"].elements["DesiStop"].value = "";
document.forms["Catalogue"].elements["Catalogue__Fou"].value = "";
document.forms["Catalogue"].elements["Filtre"].innerHTML = "";
 
var selectbox = document.forms["Catalogue"].elements["Categorie"];
for (var i = 0; i < selectbox.length; i++)
{
	selectbox.options[i].selected = false;
}
}

Mais ça ne marche pas

, et un petit coup de clavier serait donc le bien venu afin de me mettre sur la bonne voie.

En vous remerciant pour l'aide accordée...

Richard

**SpaceFrog** · 14/12/2009, 16h58

JE viesn de tester ceci sous ffx et IE sans souci particulier

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
<script type="text/javascript">
function bell(){
var i=0
while(document.forms['foo'].elements['bar'].options[i++]){
  document.forms['foo'].elements['bar'].options[i-1].selected=false
  }
  }
</script>
</head>
 
<body>
<form name='foo'>
<select name="bar" multiple>
 <option>jhgjhg</option>
  <option>jhgjhg</option>
   <option>jhgjhg</option>
    <option>jhgjhg</option>
</select>
<input type="button" onclick='bell()' value="effacer" />
</form>

**Arnaud F.** · 14/12/2009, 20h29

Bonjour,

pourquoi ne pas faire un "reset" de votre form ?

Code :

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

document.forms["Catalogue"].reset();

Pour la déselection, suffit de faire :

Code :

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

document.getElementById("Categorie").selectedIndex = -1;

**richard_sraing** · 15/12/2009, 09h27

Bon,

J'ai essayer la méthode de SpaceFrog, et je n'arrive pas à la faire fonctionner. (Je n'ai pas dit qu'elle ne marchait pas, juste que moi, je n'arrive pas à la faire fonctionner.)

Code JAVASCRIPT :

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

1
2
3
4
var i=0
while(document.forms['Catalogue'].elements['Categorie'].options[i++]){
  document.forms['Catalogue'].elements['Categorie'].options[i-1].selected=false
  }

Pour la méthode de Arnaud F., le .reset sur le formulaire fonctionne, mais seulement lorsque celui-ci n'a pas encore été validé. Une fois que j'ai valider le formulaire, il ne reset pas la liste de sélection.

Code JAVASCRIPT :

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

1
2
3
4
function clearInput(){
	document.forms["Catalogue"].reset();
	document.getElementById("filtre") = "";
}

pour la valeur filtre, ne vous en préoccuper pas, juste un test pour voir si je pouvais vider le contenu d'un span, marche pas, donc je vais peut-être le cacher, tout simplement

Alors je sèche toujours, pourriez vous m'aider sioux plaie...

Je me dit aussi que le code du formulaire pourrait être intéressant :

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
<form action="Catalogue.asp"  id="Catalogue" name="Catalogue" method="post">
	<table border="0">
		<tr>
			<td class="Label" align="left">Désignation contenant:</td>
			<td>
				<input type="text" size="55" name="DesiStart" value="<%=DesiStart%>" />
			</td>
			<td class="Label" align="right">ou :</td>
			<td>
				<input type="text" size="55" name="DesiStop" value="<%=DesiStop%>" />
			</td>
		</tr>
		<tr>
			<td class="Label" align="left">Catégorie :</td>
			<td>
			<select name="Categorie" id="Categorie" Multiple="multiple" size="5" width="100%">
				<% oCatalogue.call "Msg_Categories", Categories %>
			</select>
			</td>
			<td colspan="2"><i>CTRL &nbsp;+ clic pour sélectionner plusieurs catégories.</i><br/>
			<i>SHIFT + clic pour sélectionner plusieurs catégories successives.</i><br/><br/>
			<u>Valeur du filtre:</u> <span id="Filtre"><%=Categories%></span>
			</td>
		</tr>
		<tr>
			<td class="Label" align="left">Fournisseur :</td>
			<td><input type="text" size="30" name="Catalogue__Fou" value="<%=Fourn%>" />
			<input type="button" value="..." class="ListButton" name="bFourn" onClick="selectFourn()" /></td>
 
		</tr>
		<tr><td>
		<input class="ActionButton" type="submit" name="Filtering" value="Rechercher" /></td><td>
		<input class="ActionButton" type="button" value="Réinitialiser les champs" onClick="clearInput()"/></td>
		</tr>
	</table>
</form>

Voilà, je pense que maintenant, tout est dit.

Merci pour l'aide que vous pourrez encore m'accorder, car sérieusement, je ne vois absolument pas comment faire.

**SpaceFrog** · 15/12/2009, 09h41

Il se peut que tes éléments de form soient masqués par le tableau...
les balises tables ne sont pas faites pour faire de la mise en page d'elements et encore moins d'elements de form ...

un simple test

Code :

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

 alert(document.forms['Catalogue'].elements['Categorie'].options.length)

te dira si tu arrives à mettre la main sur les elements du form ou non

**richard_sraing** · 15/12/2009, 10h08

J'ai bien accès au élément de mon form se trouvant de le tableau, j'obtiens le nombre d'élément se trouvant dans ma liste (soit 31).

Mais la liste ne se vide toujours pas :'(

D'autres idées sont la bien venues...

**richard_sraing** · 15/12/2009, 10h25

Je viens de remarquer une chose, qui pourrait probablement être la cause de mes soucis.

Le langage qui est utilisé derrière mon site est un langage peu connu (Dataflex). Je l'utilise afin de réaliser des requêtes pour l'affichage des données.

Le contenu de la liste étant créé à partir d'information se trouvant dans la BD, je fais donc un appel VBScript qui lancera la requête au serveur de BD, me retournera la réponse, et enverra ensuite le tout au client au format HTML.

Voici donc cet appel :

Code VBSCRIPT :

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

1
2
3
<select name="Categorie" id="Categorie" Multiple="multiple" size="5" width="100%">
	<% oCatalogue.call "Msg_Categories", Categories %>
</select>

Et lorsque je réaffiche la page, je refais appel à ce même script afin de recréer la liste des catégories (dans mon cas), et je passe également la liste des catégories choisies précédemment, afin de sélectionner celle dans la liste qui était sélectionnées avant validation du form.

(Je me rends compte que c'est tordu, mais je ne saurais pas faire plus simple, désolé).

Est ce que cet appel pourrait poser problème? Normalement non, car il génère simplement du code HTML.

Je ne vois plus à ce niveau ci, trop loin pour moi tout ça.

**E.Bzz** · 15/12/2009, 10h35

Bonjour,

Envoyé par richard_sraing

pour la valeur filtre, ne vous en préoccuper pas, juste un test pour voir si je pouvais vider le contenu d'un span, marche pas, donc je vais peut-être le cacher, tout simplement

La syntaxe que tu utilises

Code :

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

document.forms["Catalogue"].elements["Filtre"].innerHTML = "";

fait référence au name de l'élément et non à son id.
Or tu n'a pas donné de name au <span> (ce qui est normal d'ailleurs, car ce n'est pas un élément de formulaire).
Il faut que tu utilises la syntaxe

Code :

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

document.getElementById("Filtre").innerHTML="";

Du coup, de 2 choses l'une :

soit tu es sous IE et dans ce cas ta syntaxe aurait dû fonctionner
soit tu n'es pas sous IE et c'est peut être cette erreur qui plante ton code et empêche la déselection des lignes de ton <select>

EDIT : j'avais pas vu le post précédent ...

Envoyé par richard_sraing

Est ce que cet appel pourrait poser problème? Normalement non, car il génère simplement du code HTML.

Oui, mais tout dépend comment se code est pris en compte par le navigateur : il peut ne pas être reconnu dans le form, par exemple ...
MAis comme le test proposé par SpaceFrog te donnait le bon nombre de lignes, ça semble être bon.

A+

**richard_sraing** · 15/12/2009, 10h43

Bon, je vais commencer par m'excuser pour mon incompétence.

Voilà ce que j'ai maintenant, et ça fonctionne très bien... ^^

Code JAVASCRIPT :

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

1
2
3
4
5
function clearInput(){
	document.forms["Catalogue"].reset();
	document.getElementById("Categorie").selectedIndex = -1;
	document.getElementById("Filtre").style.visibility = 'hidden';
}

Par contre, j'ai l'impression de l'avoir fait toute à l'heure, et ça ne marchait pas.
Concernant la remarque de E.Bzz, j'ai fait la constatation aussi, mais n'ai pas compris, ou plus su, pourquoi ça n'allait pas, maintenant au moins, je le sais (j'irais dormir moins c** ce soir

)

Je ne sais pas par contre pourquoi le reset de mon formulaire ne marche pas sur ma liste. Cela m'intrigue, je vais essayer de voir si jamais je vois pourquoi ça ne marche pas, je noterais une réponse dans les prochains jours. Sinon, c'est que je n'aurais rien trouver.

En vous remerciant tous pour l'aide que vous m'avez apporter, et les conseils que j'aurais retenu pour le développement future, je vous souhaite de passer une belle journée nuageuse et froide...

SELECT MULTIPLE et désélection

JavaScript

Discussions similaires

Partager

Partager