Fieldset avec liste déroulante

Version imprimable

Bonjour,

J'ai une liste déroulante dans un Fieldset, je voulais savoir s'il était possible de modifier la hauteur de Fieldset à l'ouverture de la liste déroulante.

Mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="" method="post" id="choix_cartes">
                                   <fieldset style="border: 4px double #3e3737">
                                     <legend>Sélectionnez une carte</legend>      
 
 
<select id="list_deroul" style="background-color:#000; color:#f4f1f1; text-align:center;" onchange="javascript:location.href=this.options[this.selectedIndex].value;">
                        <option value="vide">- - - - - Choisissez une région - - - - -</option>
                        <option value="Auvergne_rhone_alpes.html">Auvergne Rhône Alpes </option>
                        <option value="Ardeche_arrondissements.html">Ardèche Arrondissement </option>
                        <option value="Ardeche_circonscriptions.html">Ardèche Circonscription </option>
                        <option value="Ardeche_cantons.html">Ardèche Cantons </option>
                        <option value="Ardeche_communes.html">Ardèche Communes </option>
                        <option value="Ardeche_Largentière_communes.html">Ardèche Largentière Communes </option>
<!--                        <option value="Ardeche_privas_communes.html">Ardèche privasCommunes </option> -->
                        <option value="Ardeche_tournon_sur_rhone.html">Ardèche Tournon sur Rhône Communes </option>
 
                                                         </select>
                                                        </fieldset>
                                                          </form>

je vous remercie d'avance

Max

21/03/2018, 09h03
SpaceFrog

Le souci de la hauteur du select c'est qu'il est plus lié au navigateur qu'un div par exemple, sa hauteur dépliée est liée au nombre d'options affichées déterminée également par l'attribut size ...
De plus les options se déroulent en superposition ...
Le plus simple est encore de trouver un plugin d'émulation de select du coup les options étant en général emulées par des li dans un ul, le fieldset
avec jquery un exemple vite fait : https://jsfiddle.net/qsetp935/29/
21/03/2018, 09h09
danielhagnoul

:salut:

À mon avis ce n'est pas possible et ce n'est pas nécessaire, car la partie ouverte du select se place au-dessus du contenu de la page web.
21/03/2018, 09h24
Invité

Bonjour,

j'ai DEJA donné une réponse ici... à laquelle tu n'as DEJA pas répondu...
21/03/2018, 09h53
NoSmoking

Bonjour,
j'enfonce le clou :mrgreen:
Ergonomiquement parlant je considère que c'est une mauvaise idée, tous les « Down_Quelque_Chose » recouvre le contenu qui suit cela évite accessoirement à la page de sautiller.
21/03/2018, 09h58
Invité

En effet : ce n'est pas parce qu'une solution existe qu'elle est bonne (ou la meilleure)... :aie:

D'autant plus (ou moins ?) sur écran tactile....
21/03/2018, 10h03
apdf1

Bonjour à Tous.

je suis allé voir le site https://jsfiddle.net/qsetp935/29/ de SpaceFrog sa fonctionne sur le site et quand je recopie sur mon ordi sa ne fonctionne pas ou je me suis planter?

Merci et bonne journée

Max
21/03/2018, 10h07
SpaceFrog

tu ne charges sans doute pas jquery ??
21/03/2018, 10h44
apdf1

Re,

Si je suis aller le prendre sur le site et j'ai mis le lien

Code:

<script src='js/jQuery v3.3.1.js'></script>
21/03/2018, 11h51
SpaceFrog

Regarde en console si tu as un message d'erreur ..
21/03/2018, 11h55
apdf1

Re,

Non justement, même la liste ne s'ouvre pas à tu essayer toi?
22/03/2018, 08h14
SpaceFrog

Le code fourni est 100% fonctionnel.
Si chez toi il ne se passe rien c'est que tu as un souci de jquery ou de selecteurs ...

Comment l'as tu implémenté ?
As tu recopié tout le code avec le html ? as tu adapté en modifiant les id et classes ?

Bonjour SpaceFrog,

Voila mon code avec bien entendu jquery en lien.

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
   <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
 
    <style>
        
        
.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }
 
.options li:hover {
  background-color: silver;
}
.oflow {
  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;
   }
        
        </style>    
 
     <script>   
        
      $ (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> 
 
    </head>
    <body>
 
      <form >
<fieldset id="fs" class="oflow">
<div class="select">
<input type="text" id="foo" value="" /> ▼
<ul class="options">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
</ul>
 
</div>
 
</fieldset>
</form>  
 
        <script src='js/jQuery v3.3.1.js'></script>
 
    </body>
</html>

Merci et bonne journée

Max

22/03/2018, 08h44
SpaceFrog

Petit rappel ...
le code sur ta page et interprété chronologiquement dans l'ordre des lignes ...
ton jquery est cahrgé en fin de page alors qu tu invoques des fonctions en début de page !!!
Tu dois obligatoirement avoir un message en console du genre "$ is undefined" ...

La solution:
soit tu remontes ton appel au chargement de jquery en haut de page AVANT ton script de ready dans lequel tu initialises les events
soit tu descends ton ready en bas de page APRES ton appel au chargement de jquery ...

Re,

Je viens de faire se que tu me demande le voici:

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
  <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
 
    <style>
     
.options li { list-style:none;
list-style-position: outside;
 cursor: pointer;
 }
 
.options li:hover {
  background-color: silver;
}
.oflow {
  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;
   }   
        </style>    
 
    </head>
    <body>
 
      <form >
<fieldset id="fs" class="oflow">
<div class="select">
<input type="text" id="foo" value="" /> ▼
<ul class="options">
<li>un</li>
<li>deux</li>
<li>trois</li>
<li>quatre</li>
<li>cinq</li>
<li>six</li>
</ul>
 
</div>
 
</fieldset>
</form>  
 
 
                      <script src='js/jQuery%20v3.3.1.js'></script>
 
 
     <script>   S
      $ (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>

Et sa ma rien donnée et sur ma console je n'est pas de message d'erreur?

@+ Max

22/03/2018, 09h14
apdf1

Re,

Je viens de rechercher le code au complet et appliquer ton conseil et sa fonctionne!!!!!!

Je te remercie et te souhaite une bonne journée.

Max