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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/JavaScript] Effacer la sélection d'un select multiple

sire de Botcor

Armorican way of life

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

Publicité

sire de Botcor

Armorican way of life

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

gooopil

pfiew

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

sire de Botcor

Armorican way of life

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

olivthill

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

sire de Botcor

Armorican way of life

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

gatsu35

Blablaté par Harko

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

sire de Botcor

Armorican way of life

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

gatsu35

Blablaté par Harko

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Untitled</title>
<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];
if (opt.selected) {
sel.removeChild(opt);
i--;
}
}
}
</script>
</head>
<body>
<select name="lstbox1" id="fruits" size="5" multiple="multiple">
<option value="a">Abricot</option>
<option value="b" selected="selected">Banane</option>
<option value="c" selected="selected">Cerise</option>
<option value="d" selected="selected">Datte</option>
<option value="e">Endive</option>
<option value="f">Pouet</option>
<option value="f">Pouet1</option>
<option value="f">Pouet2</option>
<option value="f">Pouet3</option>
<option value="f">Pouet4</option>
<option value="f">Pouet5</option>
<option value="f">Pouet6</option>
<option value="f">Pouet7</option>
<option value="f">Pouet8</option>
</select>
<input type="button" onclick="removeSelectOpt('fruits')" value="Supprimer les fruits sélectionnés" />
</body>
</html>

sire de Botcor

Armorican way of life

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

Publicité

gatsu35

Blablaté par Harko

sire de Botcor a écrit :

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

sire de Botcor

Armorican way of life

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

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:html	Appeller 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

Page générée en 0.079 secondes