Comment bien gérer les <select> <option>

Bonour,

Lorsque je créé des listes déroulantes HTML j'aime bien mettre une première option avec une indication, comme ci dessous:

  <select name="selector" id="selector">
    <option value="0" class="0">faire un choix</option>
    <option value="1" class="1">choix1</option>
    <option value="2" class="2">choix2</option>
    <option value="3" class="3">choix3</option>
    <option value="4" class="4">choix4</option>
    <option value="5" class="5">choix5</option>
    <option value="6" class="6">choix6</option>
    <option value="7" class="7">choix7</option>
  </select> 

Bien sur la valeur de la première ligne (value="0") ne sera pas traitée ou même générera un message d'erreur lors de la validation du formulaire.
L'inconvénient est que ce choix apparaît lorsque l'on déroule la liste, et c'est bien normal en fait (repère 1 sur l'image) et j'aimerais que cette ligne ne soit pas visible dans la liste ouverte.
J'ai trouvé un subterfuge en ajoutant une classe à toutes les options sauf la première, comme ceci:

  <select name="selector" id="selector">
    <option value="0" class="0">faire un choix</option>
    <option value="1" class="ch 1">choix1</option>
    <option value="2" class="ch 2">choix2</option>
    <option value="3" class="ch 3">choix3</option>
    <option value="4" class="ch 4">choix4</option>
    <option value="5" class="ch 5">choix5</option>
    <option value="6" class="ch 6">choix6</option>
    <option value="7" class="ch 7">choix7</option>
  </select> 

et avec l'aide de jQuery:

      $(document).ready(function(){
        $("#selector option").hide();  // masque toutes les lignes du <select>
        $("#selector option.ch").show(); // affiche toutes les lignes du <select> sauf la 1ère
      });

Ça marche (repère 2 sur l'image) ... mais je me demandais si il n'existait pas une solution native, ou plus élégante, pour faire cela...
-

Modifié par lionel_css3 (16 Feb 2018 - 11:29)

Salut..
Pas à ma connaissance non plus et en fait c'est mieux ainsi

J'explique
Tu proposes de faire un choix...
Si on a pas envie de choisir ??? ou si on se trompe et finalement on veut revenir au choix par défaut ?? La suppression de choix d'un des éléments est juste contraire aux bonnes pratiques

Dans ton cas tu devrais avoir un label qui dit choisissez, et un select avec en premier un choix 0 value "aucun" ou alors tu forces sur le premier tout de suite

Et si ça ne correspond toujours pas et bien la version de base est très bien et répond à la logique du web

Et l'eau,

Bien que je partage le même point de vue de pchlj (mais tout dépend du contexte), biduletruc offre une solution intéressante. Il me semblait qu'on devait ajouter l'attribut hidden (mais non en fait).

Dans tous les cas, je vois pas vraiment l'intérêt de jcuicui ou même le JS pour ce genre de chose puisque c'est un problème de mise en forme. Dans ce cas là, le CSS est de rigueur. On peut très bien cibler :active, :disabled, option[ disabled ], etc.
Modifié par niuxe (17 Feb 2018 - 21:04)

pchlj a écrit :

Si on a pas envie de choisir ??? ou si on se trompe et finalement on veut revenir au choix par défaut ?? La suppression de choix d'un des éléments est juste contraire aux bonnes pratiques

Pas forcément, l'ajout de ce genre d'option est généralement fait pour rendre un champ select obligatoire, lorsque l'on souhaite:

1) Qu'une valeur du select soit choisie pour valider le formulaire
2) Que le choix soit conscient. Pour éviter qu'on laisse la première option du select sans l'avoir lu.

Mais la solution de biduletruc me semble la plus simple, la plus clean et la plus accessible.