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

Version imprimable

01/02/2007, 15h51
Djakisback

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

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.

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

Code:

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
 
};

02/02/2007, 13h00
Djakisback

Je trouve l'idée excellente, merci :D
Par contre ca ne fonctionne que sous FF, dommage.

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

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:

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

02/02/2007, 17h06
mikemarti

Citation:

Envoyé par Djakisback

Je trouve l'idée excellente, merci :D
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...
02/02/2007, 18h26
Djakisback

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.
05/02/2007, 09h03
SpaceFrog

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

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:

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