Affichage liste déroulante d'un <select>

Version imprimable

Bonjour,

J'ai une liste déroulante que j'ai trouvé, qui fonctionne trés bien mais j'aimerai lui apporté une petite modification.
Suivant ou je la met sur ma page ex: au trois quart de la page la liste s'ouvre vers le haut "normale...".
J'aimerai lui donner une hauteur d'ouverture et l'obliger d'ouvrir vers le bas.

Mon code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title></title>
 
      <style>
 
body{background: #000;}
select#soflow,
select#soflow-color { 
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
 background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
 background-position: 97% center;
 background-repeat: no-repeat;
 border: 1px solid #AAA;*/
 color: #555;
 font-size: inherit;
 margin: 20px;
 overflow: hidden;*/
 padding: 5px 10px;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 300px;
   
}
select#soflow-color { 
color: #fff;
background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#000, #000 40%, #000);
background-color: #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-left: 55px; 
}
 
option { 
background-color: white; 
color: black; } 
   
    </style>
 
</head>
 
<body>
 
 
 <div id="list">
<select  id="soflow-color"  name="departementSelect" onchange="javascript:location.href=this.options[this.selectedIndex].value;">
<OPTION >--- Choisir une Région ---</OPTION>
        <optgroup  class="xxx" label="Région Metropole (2016)">
 
 <OPTION      value="Auvergne_rhone_alpes.html">Auvergne Rhône Alpes</OPTION>
 <OPTION      value="Bourgogne_Franche_Comte.html">Bourgogne Franche Comté</OPTION>						
 <OPTION      value="Bretagne.html">Bretagne</OPTION>						
 <OPTION      value="Centre_Val_de_Loire.html">Centre Val de Loire</OPTION>						
 <OPTION      value="Corse.html">Corse</OPTION>						
 <OPTION      value="Grand_Est.html">Grand Est</OPTION>						
 <OPTION      value="Hauts_de_France.html">Hauts de France</OPTION>						
 <OPTION      value="Île_de_France.html">Île de France</OPTION>						
 <OPTION      value="Normandie.html">Normandie</OPTION>						
 <OPTION      value="Nouvelle_Aquitaine.html">Nouvelle Aquitaine</OPTION>						
 <OPTION      value="Occitanie.html">Occitanie</OPTION>						
 <OPTION      value="Pays_de_la_Loire.html">Pays de la Loire</OPTION>						
 <OPTION      value="Provence_Alpes_Côte_d_Azur.html">Provence Alpes-Côte d'Azur</OPTION>					
        </optgroup>	
 
        <optgroup label="Outre-mer (DOM)"> 
 
<OPTION       value="Guadeloupe.html">Guadeloupe</OPTION>						
<OPTION       value="Guyane.html">Guyane (française)</OPTION>						
<OPTION       value="Martinique.html">Martinique</OPTION>
<OPTION       value="Mayotte.html">Mayotte</OPTION>	            
<OPTION       value="Reunion.html">Réunion</OPTION>											
	    </optgroup>	
 
        <optgroup label="Outre-mer (TOM)"> 
 
<OPTION       value="Saint_Pierre_et_Miquelon.html">Saint Pierre et Miquelon</OPTION>						
<OPTION       value="Saint_Barthélemy.html">Saint Barthélemy</OPTION>						
<OPTION       value="Saint_Martin.html">Saint Martin</OPTION>						
<OPTION       value="Wallis_et_Futuna.html">Wallis et Futuna</OPTION>						
<OPTION       value="Nouvelle_Calédonie.html">Nouvelle Calédonie</OPTION>						
<OPTION       value="Tahiti.html">Polynésie française (Tahiti)</OPTION>
       </optgroup>	
 
       <optgroup label="Région Metropole (avant 2016)">
 
<OPTION       value="Alsace.html">Alsace </OPTION>
<OPTION       value="Aquitaine.html">Aquitaine</OPTION>                    
<OPTION       value="Auvergne.html">Auvergne </OPTION>
<OPTION       value="Basse_Normandie.html">Basse Normandie</OPTION>                  
<OPTION       value="Bourgogne.html">Bourgogne</OPTION>
<OPTION       value="Bretagne.html">Bretagne</OPTION> 
<OPTION       value="Centre.html">Centre</OPTION>
<OPTION       value="Champagne_Ardenne.html">Champagne Ardenne</OPTION>
<OPTION       value="Corse.html">Corse</OPTION>                 
<OPTION       value="Franche_Comté.html"> Franche Comté</OPTION> 
<OPTION       value="Haute_Normandie.html">Haute Normandie</OPTION>
<OPTION       value="Île_de_France.html">Île de France</OPTION>	
<OPTION       value="Languedoc_Roussillon.html">Languedoc Roussillon</OPTION>						
<OPTION       value="Limousin.html">Limousin</OPTION>						
<OPTION       value="Lorraine.html">Lorraine</OPTION>						
<OPTION       value="Midi_Pyrénées.html">Midi Pyrénées </OPTION>						
<OPTION       value="Nord_Pas_de_Calais.html">Nord Pas de Calais</OPTION>
<OPTION       value="Pays_de_la_Loire.html">Pays de la Loire</OPTION>
<OPTION       value="Picardie.html">Picardie </OPTION>						
<OPTION       value="Poitou_Charentes.html">Poitou-Charentes</OPTION>
<OPTION       value="Provence_Alpes_Côte_d_Azur.html">Provence Alpes Côte d'Azur</OPTION>
<OPTION       value="Rhône_Alpes.html">Rhône Alpes </OPTION>						
       </optgroup>	
</select>
</div>
</body>

Je vous remercie d'avance
Cordialement
Max

17/03/2018, 08h41
danielhagnoul

:salut:

Chaque navigateur web gère la chose à sa manière et à ma connaissance il n'y a aucun moyen d'interférer avec le sens d'ouverture et le nombre d'options visibles.

Peut-être du côté de jQuery UI ou d'un select "spécial".
17/03/2018, 18h59
NoSmoking

Bonjour,
je confirme ce que dit danielhagnoul, le contraire serait étonnant, et il est vrai que le rendu est parfois déroutant.

@apdf1 : tu en es où de cette discussion : Trois Listes déroulantes liées, tu as abandonné ?
18/03/2018, 05h17
apdf1

Bonjour NoSmoking,

Je te remercie à toi et à danielhagnoul de vos réponses au sujet Liste déroulante avec lien .

Citation:

@apdf1 : tu en es où de cette discussion : Trois Listes déroulantes liées, tu as abandonné ?

Non je n'est rien abandonné, mais je cherche toujours à mettre un lien vers le département ex:

région 2016: Centre Val de Loire / ancienne région: Centre / département: Cher et là ajouter un lien vers la page nommé: cher.html

Je te remercie et te souhaite une bonne journée

Max
18/03/2018, 11h44
Invité
Bonjour,

Citation:

Envoyé par apdf1

...J'aimerai lui donner une hauteur d'ouverture et l'obliger d'ouvrir vers le bas...

Une alternative :
- <select>
Citation:

Attribut size
Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps.
On notera que les navigateurs ne sont pas obligés de présenter un élément <select> sous la forme d'une liste déroulante.
La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).

ex. :
Code:

1 2 <select size="10"> ...
- Affiche 10 lignes à l'écran, avec barre de scroll
- PAS d'ouverture de boite (ni vers le haut, ni vers le bas !)
Remarque : on peut l'implémenter en jQuery :
Code:

1 2 <select id="monselect"> ...
Code:

1 2 3 4 5 $('#monselect').on('mouseover',function(){ $(this).attr('size',10); }).on('mouseout',function(){ $(this).attr('size',1); });
Ou en JavaScript inline :

Code:

<select id="monselect" onmouseover="this.setAttribute('size',10);" onmouseout="this.setAttribute('size',1);">

Si on veut l'ouvrir de la hauteur de TOUTES les options :

Code:

<select id="monselect" onmouseover="this.setAttribute('size',this.options.length);" onmouseout="this.setAttribute('size','1');">

Bonjour jreaux62

Alors j'ai bien essayer de pratiquer avec les conseils que tu me donne, mais je n'est pas réussi à mettre ma hauteur à size="8"Je mets mon code pour voir ou j'ai fait l'erreur?

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
 
     <script src="js/jquery-3.3.1.min.js"></script> 
 
    <style>
        body{background-color:#000;}   
        
.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }
 
.options li:hover {
  background-color: #f80ccb;
}
.oflow { width: 200px;
  border: solid 1px red;
overflow: visible; }
.options{
   
  display: none;
  margin: 0;
  padding:0;
  border: solid 1px silver;}
#foo { 
 border :0;
 }
 .select {
   border: solid 1px silver;
   display:inline-block;
   } 
        
.select{size=10; }      
   
input + span{           
                                color:red;
                        }         
li{background: #000; color:#fff;}
        
input{background-color: #000;}     
        
#menu li ul a {
        height: 50px;
}  
        
 
   </style>  
 
    </head>
    <body>
 
<form>
  <fieldset id="fs" class="oflow" >
    <div class="select" >
        <input type="text" id="foo" value="" placeholder="Recherche !" /><span> ▼</span>
    </div>
 
    <ul class="options" id="menu" >
 
      <li>un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
      <li>cinq</li>
      <li>six</li>
              <li>un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
      <li>cinq</li>
      <li>six</li>
              <li>un</li>
      <li>deux</li>
      <li>trois</li>
      <li>quatre</li>
      <li>cinq</li>
      <li>six</li>
    </ul>
 
 
  </fieldset>
</form> 
 
 
 
   <script type="text/javascript">   
$ (function(){
 
$('.select').on('click', function(){
  $(this).next('.options').slideToggle();
})
$('#foo').on('focus', function(){ $(this).blur();})
 
$('.options>li').on('click', function(){
  selval= $(this).text();
  $('#foo').val( selval );
  $(this).parent('.options').slideToggle();
});
 
}); 
 </script>  
 
    </body>
</html>

Je vous remercie d'avance

Max

01/10/2018, 07h59
NoSmoking

Et où est ce que tu as trouvé cette règle CSS ???

Code:

.select{size=10; }

Prend la peine de bien lire les réponses faites !
01/10/2018, 09h22
Invité

@NoSmoking

Surtout qu'il n'y a pas de <select> :mouarf:

Le code n'a plus rien à voir avec la question initiale.
01/10/2018, 11h01
apdf1

Salut jreaux62

Le code c'est celui que tu à fait, mais bon se n'est pas grave je vais me débrouillé?

Bonne journée

Max
01/10/2018, 11h16
Invité

@apdf1

Tu as ouvert PLUSIEURS discussions.

Il faut en résoudre UNE à la fois !
Sinon, on ne s'y retrouve plus.

Le dernier code que tu montres (avec <ul>,...) n'a rien à voir avec le <select> de la question initiale de CETTE discussion : "Affichage liste déroulante d'un <select>".

Citation:

Envoyé par apdf1

Le code c'est celui que tu à fait...

PAS dans CETTE discussion en tout cas !

Il ne faut pas tout mélanger.
01/10/2018, 11h44
apdf1

Re,

Ok merci
02/10/2018, 13h55
NoSmoking
Dans ton cas c'est du CSS classique qui doit être appliqué
Code:

1 2 3 4 5 .options { height: 12.5em; overflow: auto; line-height: 1.25em; }
Il va être temps de t'y mettre sérieusement ;)
03/10/2018, 19h11
apdf1

Salut NoSmoking

Je te remercie et te souhaite une bonne soirée

Max