Est-il possible de masquer la première option, c'est-à-dire <option>Select One</option> lorsque l'utilisateur clique sur la liste déroulante pour voir les options. Le texte Sélectionner un n'apparaît donc pas dans la liste

2
acctman 18 oct. 2011 à 11:58

5 réponses

Meilleure réponse

Comme il n'existe aucun moyen fiable pour tous les navigateurs de masquer les éléments option, le mieux est de le supprimer sur focus et de l'ajouter à nouveau sur blur:

jQuery(document).ready(function () {
    var first = jQuery('#myselect').find('option').first();
    jQuery('#myselect').on('focus', function (e) {
        first.remove();
    }).on('blur', function (e) {
        jQuery(this).find('option').first().before(first);
    });
});

Voici un exemple de travail

7
unobf 28 mars 2015 à 16:26

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/

6
Sujan Mhrzn 28 juil. 2016 à 07:30

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

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

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

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.

0
Nikoloff 18 oct. 2011 à 11:05

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); 
});
1
Andy E 18 oct. 2011 à 09:33

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

3
Stuart Harrison 4 janv. 2013 à 14:50