Liste déroulante multiple : scroller jusqu'à l'option sélectionnée

**Djakisback** · 01/02/2007, 15h51

Salut,

j'ai donc une liste déroulante multiple et je présélectionne une valeur dedans.
Mon but est de scroller automatiquement jusqu'à l'option sélectionnée pour que celle-ci soit visible directement.
ex : si j'ai une liste de 1 à 50 et que je préselectionne 45, et que la taille de ma liste est de 10 lignes, je serais obligé de défiler à la main pour voir qu'une option est sélectionnée.
Je suis pas sur d'être très clair ^^

Merci d'avance.

**mikemarti** · 01/02/2007, 17h52

J'ai pas trouvé l'attribut ou la fonction miracle.
Donc j'ai écrit ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
window.onload = function() { 
 
var sel=document.getElementById('mon_select');    	// le select...
var opt_select=sel.selectedIndex; 	// on garde la valeur de l'option selectionnée par défaut
 
 
sel.selectedIndex=sel.options.length-1;			// on descend jusqu'à la fin de la liste (pour que l'option ne se retrouve pas en bas.. c'est plus joli...)	
sel.selectedIndex=opt_select;				// on remonte jusqu'à l'option sléectionnée par défaut
 
};

**Djakisback** · 02/02/2007, 13h00

Je trouve l'idée excellente, merci

Par contre ca ne fonctionne que sous FF, dommage.

**SpaceFrog** · 02/02/2007, 15h04

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
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
function selectedvisible(index){
 
var Obj=document.getElementById('sel')
if(index>Obj.options.length-1){return false;}
if(index+Obj.size<Obj.options.length){
			Obj.selectedIndex=index+Obj.size;
			Obj.selectedIndex=index;
			}
else{Obj.selectedIndex=Obj.options.length-Obj.size;
 		Obj.selectedIndex=index;}
 
}
</script>
</head>
 
<body>
<select id='sel' size=10 >
<script type='text/javascript'>
for(i=0; i<100;i++){document.write("<option>"+i+"</option>");}
</script>
</select>
<input type='text' id="item" />
<input type="button" onclick="selectedvisible(document.getElementById('item').value)" value="selection"/>
 
</script>
 
</html>

**Djakisback** · 02/02/2007, 16h47

Merci pour l'aide, ca fait une heure que je galère ^^
Mais au final cela ne fonctionne pas dans le cas d'une liste avec la propriété multiple à true. ex :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<select id="authors" size="5" multiple="true">
<option value="433">POUILLON Christian </option>
<option value="434">POUPARD Paul (Mgr)</option>
<option value="435">POURTALES (de) Guy </option>
<option value="436">RABINE Henri </option>
<option value="437">RAMPOLLA del TINDARO Ida </option>
<option value="438">RAMUZ Charles-Ferdinand </option>
<option value="440" selected="selected">RAY Lionel </option>
<option value="441">REGAMEY Pie </option>
<option value="442">REITH-BRONNER F. </option>
<option value="443">REMOND René </option>
<option value="453">RIVIÈRE Jacques </option>
<option value="454">ROBBEN C. </option>
<option value="455">ROBERT Pierre-Edmond </option>
</select>
 
<script type='text/javascript'>
function scrollToSelectedIndex()	{
	var Obj = document.getElementById('authors');
	var index = Obj.selectedIndex;
//window.alert(index); // ?????????
	if(index > Obj.options.length - 1)	{
		return false;
	}
	if(index + Obj.size < Obj.options.length)	{
		Obj.selectedIndex = index + Obj.size;
		Obj.selectedIndex = index;
	}
	else	{
		Obj.selectedIndex = Obj.options.length - Obj.size;
		Obj.selectedIndex = index;
	}
}
 
scrollToSelectedIndex();
</script>

Là où c'est très louche c'est que cela fonctionne (FF2/IE6) si j'ajoute un window.alert().
Donc si quelqu'un y comprend quelque chose ca m'intéresse

Merci

**mikemarti** · 02/02/2007, 17h06

Envoyé par Djakisback

Je trouve l'idée excellente, merci

Par contre ca ne fonctionne que sous FF, dommage.

J'ai testé sous FF22 et IE7.
Je vois pas ce qui pourrait géner le fonctionnement du script sous IE6...

**Djakisback** · 02/02/2007, 18h26

Effectivement, je me suis planté ca fonctionne mais uniquement si je mets l'appel de la fonction dans le onLoad du body mais j'ai besoin de mettre l'appel juste après la liste déroulante. Je ne sais pas si c'est possible.

**SpaceFrog** · 05/02/2007, 09h03

heu pourquoi cette nécessité de le mettre juste àprès le select ???
a priori oui si tu mets le script juste àprès le selct celuici etant instancié, le script devrait fonctionner ...

**Djakisback** · 05/02/2007, 14h35

Salut,
parce que j'utilise une méthode de classe PHP et j'aimerais que tout soit dans la méthode.
Effectivement le select est créé donc ca devrait marcher, il fait bien la sélection des items mais ne scroll pas jusqu'au premier item. Apparemment ce serait un problème de focus.
Voici la dernière fonction qui marche avec une liste multiple mais qu'a besoin du focus sur le select si elle n'est pas appelée dans le onLoad du body :

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
21
22
23
24
25
26
27
28
function scrollToSelectedIndex()	{
	var select = document.getElementById('authors');
 
	// Sauvegarde des index sélectionnés
	var selectedIndex = new Array();
	for(i = 0; i < select.options.length; i++)	{
		if(select.options[i].selected == true)	{
			selectedIndex.push(i);
		}
	}
 
	if(selectedIndex.length != 0)	{
		// Focus sur le select
		select.focus();
 
		// Sélection de la dernière option
		select.selectedIndex = select.options.length - 1;
		// Désélection de la dernière option
		select.options[select.options.length - 1].selected = false;
 
		// Re-sélection des options
		for(i = selectedIndex.length - 1; i >= 0; i--)	{
			select.options[selectedIndex[i]].selected = true;
		}
		// Focus sur la fenêtre
		window.focus();
	}
}

Je vais laisser l'appel dans le onLoad du body mais si quelqu'un a une idée sur la question...
Merci d'avance

Liste déroulante multiple : scroller jusqu'à l'option sélectionnée

JavaScript

Discussions similaires

Partager

Partager