Selectbox cacher la première entrée d'option dans la liste déroulante?

Vous pouvez utiliser votre code HTML simple pour masquer le premier élément de l'option lorsque select est ouvert comme:

<select name="list">
    <option selected="selected" hidden>First Element</option>
    <option>Second Element</option>
    <option>Third Element</option>

</select>

Voici le violon de travail: https://jsfiddle.net/sujan_mhrzn/y5kxtkc6/

Si vous souhaitez supprimer l'option, le code simple serait:

var mySelect = document.getElementById('mySelect');

mySelect.onfocus = function() { mySelect.removeChild(mySelect.options[0]); }

Où mySelect est l'ID de la zone de sélection.

Edit: j'ai changé le code pour ajouter un écouteur d'événement pour l'événement focus. Cependant, ce code supprimera la première option chaque fois que vous sélectionnez la case de sélection. Je suis sûr que ce n'est pas ce dont vous avez besoin. Vous pouvez utiliser onblur pour ajouter à nouveau l'option, mais je ne sais pas si c'est ce dont vous avez besoin. Veuillez clarifier ce que vous voulez faire.

La seule méthode multi-navigateur consiste à le supprimer entièrement. En clair ol 'JS:

var sel = document.getElementById("mySelect");
sel.onfocus = function () {
    select.onfocus = null;
    sel.removeChild(sel.firstChild);
}

JQuery:

$("#mySelect").focus(function () { 
    $(this).remove(this.firstChild).unbind(arguments.callee); 
});

En tant qu'option CSS rapide, vous pouvez attribuer un identifiant au menu déroulant, puis

#cat option:first-child {
 display: none;
 } 

Ce qui précède utilise #cat comme id pour la liste déroulante

Tutoriel pour cette solution