Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
433 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1565303
sire de Bo​tcor
Armorican way of life
Posté le 25-05-2007 à 16:52:44  profilanswer
 

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
mood
Publicité
Posté le 25-05-2007 à 16:52:44  profilanswer
 

n°1565329
sire de Bo​tcor
Armorican way of life
Posté le 25-05-2007 à 17:22:45  profilanswer
 

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
n°1565561
gooopil
pfiew
Posté le 26-05-2007 à 12:35:24  profilanswer
 

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

n°1565562
sire de Bo​tcor
Armorican way of life
Posté le 26-05-2007 à 12:38:49  profilanswer
 

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
n°1565599
olivthill
Posté le 26-05-2007 à 15:21:05  profilanswer
 

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.

n°1565604
sire de Bo​tcor
Armorican way of life
Posté le 26-05-2007 à 15:25:52  profilanswer
 

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
n°1565625
gatsu35
Posté le 26-05-2007 à 17:01:15  profilanswer
 

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
n°1565627
sire de Bo​tcor
Armorican way of life
Posté le 26-05-2007 à 17:04:03  profilanswer
 

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
n°1565629
gatsu35
Posté le 26-05-2007 à 17:10:53  profilanswer
 

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" />
  7.   <title>Untitled</title>
  8. <script type="text/javascript">
  9. function removeSelectOpt(selId) {
  10.  var sel = document.getElementById(selId);
  11.  for (var i=0; i<sel.options.length; i++) {
  12.   var opt = sel.options[i];
  13.   if (opt.selected) {
  14.    sel.removeChild(opt);
  15.    i--;
  16.   }
  17.  }
  18. }
  19. </script>
  20. </head>
  21. <body>
  22.  <select name="lstbox1" id="fruits" size="5" multiple="multiple">
  23.  <option value="a">Abricot</option>
  24.  <option value="b" selected="selected">Banane</option>
  25.  <option value="c" selected="selected">Cerise</option>
  26.  <option value="d" selected="selected">Datte</option>
  27.  <option value="e">Endive</option>
  28.  <option value="f">Pouet</option>
  29.  <option value="f">Pouet1</option>
  30.  <option value="f">Pouet2</option>
  31.  <option value="f">Pouet3</option>
  32.  <option value="f">Pouet4</option>
  33.  <option value="f">Pouet5</option>
  34.  <option value="f">Pouet6</option>
  35.  <option value="f">Pouet7</option>
  36.  <option value="f">Pouet8</option>
  37. </select>
  38. <input type="button" onclick="removeSelectOpt('fruits')" value="Supprimer les fruits sélectionnés" />
  39. </body>
  40. </html>

n°1565636
sire de Bo​tcor
Armorican way of life
Posté le 26-05-2007 à 17:48:04  profilanswer
 

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
mood
Publicité
Posté le 26-05-2007 à 17:48:04  profilanswer
 

n°1565693
gatsu35
Posté le 26-05-2007 à 21:34:42  profilanswer
 

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>

n°1565733
sire de Bo​tcor
Armorican way of life
Posté le 26-05-2007 à 23:43:32  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
correction tout petit script (debutant) (JAVASCRIPT)Loader de méthodes/classes Javascript
debutant HTML prob IE7[VBA / access] Effacer valeur zone de txt en fct valeur zone de liste
Supprimer le cadre de sélection autour d'une image lien.Appeler un servlet depuis javascript
probleme de librairie mime::lite:htmlAppeller un programme en html/javascript
Problème avec DOCTYPE html PUBLIC 
Plus de sujets relatifs à : [HTML/JavaScript] Effacer la sélection d'un select multiple


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR