SELECT MULTIPLE et désélection

Version imprimable

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 :

http://lh5.ggpht.com/_8muvDobx9fc/Sy.../catalogue.jpg

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:

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 :cry:, 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

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

Code:

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>

14/12/2009, 20h29
Arnaud F.

Bonjour,

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

Code:

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

Pour la déselection, suffit de faire :

Code:

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

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:

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:

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:

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  + 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.

15/12/2009, 09h41
SpaceFrog

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:

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

te dira si tu arrives à mettre la main sur les elements du form ou non
15/12/2009, 10h08
richard_sraing

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...
15/12/2009, 10h25
richard_sraing
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:

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.
15/12/2009, 10h35
E.Bzz
Bonjour,

Citation:

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:

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:

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 :aie:
- 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 ...

Citation:

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+
15/12/2009, 10h43
richard_sraing
Bon, je vais commencer par m'excuser pour mon incompétence.

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

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 :ccool:)

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... :aie: