[HTML/JavaScript] Effacer la sélection d'un select multiple

Effacer la sélection d'un select multiple [HTML/JavaScript] - HTML/CSS - Programmation

Marsh Posté le 25-05-2007 à 16:52:44    

Salut !
 
Je cherche quelque chose que je croyais tout simple mais en fait non :sweat:  
je veux effacer (en cochant une checkbox) ce qui est sélectionné dans un <select multiple>
 
voici mon code :

Citation :

<input type="checkbox" name="CASE_SITUATION_FAMILLE" value="1" onChange="LISTEM_SITUATION_FAMILLE[].value='';">
Situation de famille
<select multiple name="LISTEM_SITUATION_FAMILLE[]" size="3" onChange="CASE_SITUATION_FAMILLE.checked=true;">
 <option value="0">Inconnu</option>
 <option value="1">Célibataire</option>
 <option value="2">Marié</option>
</select>


 
Vous auriez une idée ?


Message édité par sire de Botcor le 25-05-2007 à 17:28:46

---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 25-05-2007 à 16:52:44   

Reply

Marsh Posté le 25-05-2007 à 17:22:45    

personne n'a d'idée ?


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 26-05-2007 à 12:35:24    

Faut utiliser les id, pas les name. Et donc passer par document.getElementById pour accéder aux propriétés de ton select

Message cité 1 fois
Reply

Marsh Posté le 26-05-2007 à 12:38:49    

gooopil a écrit :

Faut utiliser les id, pas les name. Et donc passer par document.getElementById pour accéder aux propriétés de ton select


ah oui ? je vais aller voir ça de plus près
ça marche comment, en gros ?


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 26-05-2007 à 15:21:05    

Voici un exemple que j'ai testé et qui marche :

<html>
<script language="JavaScript">
function remove_selected_item(l1) {
   do {
      flag_delete = false;
      for (var i = 0; i < l1.options.length; i++) {
         if (l1.options[i].selected == true) {
            l1.options[i] = null;
            flag_delete = true;
         }
      }
   } while (flag_delete == true)
   return true;
}
 
function enum_listbox_items(l1, list_options) {
   list_options.value = "";
   for (var i = 0; i < l1.options.length; i++) {
      list_options.value = list_options.value + l1.options[i].value + ";";
   }
   return true;
}
 
</script>
<head>
</head>
<body>
<form name=myform>
<select name="lstbox1" size=5 multiple>
<option value="a" selected>Abricot
<option value="b">Banane
<option value="c">Cerise
<option value="d">Datte
<option value="e">Endive
<option value="f">Fraise
</select>
<p><input type=button name=B_remove_items value="Efface la sélection" onClick="remove_selected_item(myform.lstbox1)" >
</select>
<p><input type=hidden name=list_items value=";">
<input type=button name=B_ok value="Enumère les options restantes" onClick="enum_listbox_items(myform.lstbox1, list_items);alert(list_items.value)">
</form>
</body>
</html>

La petite subtilité à connaître, c'est que lorsqu'une option est supprimée de la liste, madame Javascript réorganise toute la liste, et il faut donc repartir du début pour supprimer l'option suivante.

Message cité 2 fois
Reply

Marsh Posté le 26-05-2007 à 15:25:52    

ah ok merci
 
mais en fait j'ai dû mal m'exprimer : je voulais juste effacer la sélection (le surlignage) pas l'élément lui-mêm ^^
 
mais ça me donne une base de travail :jap:


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 26-05-2007 à 17:01:15    

olivthill a écrit :

Voici un exemple que j'ai testé et qui marche :

code caca digne de codinghorror




Mais quel est cette horreur  [:petrus dei]

 

Message cité 1 fois
Message édité par gatsu35 le 26-05-2007 à 17:01:25
Reply

Marsh Posté le 26-05-2007 à 17:04:03    

gatsu35 a écrit :

Mais quel est cette horreur  [:petrus dei]


 :??:


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 26-05-2007 à 17:10:53    

olivthill a écrit :

La petite subtilité à connaître, c'est que lorsqu'une option est supprimée de la liste, madame Javascript réorganise toute la liste, et il faut donc repartir du début pour supprimer l'option suivante.


Il faut savoir qu'une nodeList (ce qu'est select.options) est dynamique. Donc si tu supprime l'élément n de la liste, alors l'élément n+1 prend la place de l'élément n, n+2 prend la place de n+1....
 
Et au lieu de reparcourir stupidement le tableau, tu fais un simple i-- et basta, bien sur il faut que ton for contient cette règle : i<options.length (sachant que options.length est récupéré à chaque itération de la boucle for).
 
et accessoirement les <option> ca se ferme putain, je m'en fous qu'on soit en HTML 4 ou 3, le HTML a été trop gentil pour laisser de telles stupidités.
 
et autrement voila un code propre :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  4. <head>
  5.   <meta name="generator" content="PSPad editor, www.pspad.com" />
  6.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  8.   <title>Untitled</title>
  9. <script type="text/javascript">
  10. function removeSelectOpt(selId) {
  11.  var sel = document.getElementById(selId);
  12.  for (var i=0; i<sel.options.length; i++) {
  13.   var opt = sel.options[i];
  14.   if (opt.selected) {
  15.    sel.removeChild(opt);
  16.    i--;
  17.   }
  18.  }
  19. }
  20. </script>
  21. </head>
  23. <body>
  24.  <select name="lstbox1" id="fruits" size="5" multiple="multiple">
  25.  <option value="a">Abricot</option>
  26.  <option value="b" selected="selected">Banane</option>
  27.  <option value="c" selected="selected">Cerise</option>
  28.  <option value="d" selected="selected">Datte</option>
  29.  <option value="e">Endive</option>
  30.  <option value="f">Pouet</option>
  31.  <option value="f">Pouet1</option>
  32.  <option value="f">Pouet2</option>
  33.  <option value="f">Pouet3</option>
  34.  <option value="f">Pouet4</option>
  35.  <option value="f">Pouet5</option>
  36.  <option value="f">Pouet6</option>
  37.  <option value="f">Pouet7</option>
  38.  <option value="f">Pouet8</option>
  39. </select>
  41. <input type="button" onclick="removeSelectOpt('fruits')" value="Supprimer les fruits sélectionnés" />
  43. </body>
  44. </html>

Reply

Marsh Posté le 26-05-2007 à 17:48:04    

merci encore mais le problème est le même qu'avec le code de olivthill ;)
ça supprime l'élément en même temps que la sélection...
moi ce que je cherche à faire, c'est supprimer seulement la surbrillance
(ce que ferait un reset, sauf que je veux le faire seulement sur cette sélection multiple là et avec un checkbox)

Message cité 1 fois
Message édité par sire de Botcor le 26-05-2007 à 17:48:54

---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Marsh Posté le 26-05-2007 à 17:48:04   

Reply

Marsh Posté le 26-05-2007 à 21:34:42    

sire de Botcor a écrit :

merci encore mais le problème est le même qu'avec le code de olivthill ;)
ça supprime l'élément en même temps que la sélection...
moi ce que je cherche à faire, c'est supprimer seulement la surbrillance
(ce que ferait un reset, sauf que je veux le faire seulement sur cette sélection multiple là et avec un checkbox)


Donc tu veux désélectionner les éléments qui sont sélectionnés dans le select ?  
 
ben tu reprends ma fonction :  
et tu modifie 2 lignes :o :  
     <script type="text/javascript">
        function removeSelectOpt(selId) {
            var sel = document.getElementById(selId);
            for (var i=0; i<sel.options.length; i++) {
                var opt = sel.options[i].selected = "";
             }
        }
    </script>

Reply

Marsh Posté le 26-05-2007 à 23:43:32    

super !! exactement ce que je voulais !
 :jap:  [:spikler]  :jap:


---------------
«Ceux qui croient que les peuples suivront leurs intérêts et non leurs passions n’ont rien compris au XXe siècle.» © Raymond Aron
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed