Comment masquer une <option> dans un menu <sélect> avec CSS ?

Question

J'ai réalisé que Chrome, apparemment, ne me permet pas de cacher <option> dans un <select> . Firefox le fera.

Je dois cacher le <option> qui correspondent à un critère de recherche. Dans les outils Web de Chrome, je peux voir qu'ils sont correctement définis comme suit display: none; par mon JavaScript, mais une fois alors <select> est cliqué, ils sont affichés.

Comment puis-je faire ces <option> qui correspondent à mes critères de recherche ne s'affichent PAS lorsque l'on clique sur le menu ? Merci !

Answer 1

Pour HTML5, vous pouvez utiliser l'attribut "hidden".

<option hidden>Hidden option</option>

Il est pas supporté par IE < 11. Mais si vous avez seulement besoin de masquer quelques éléments, peut-être serait-il préférable de simplement définir l'attribut hidden en combinaison avec disabled par rapport à l'ajout/la suppression d'éléments ou à des constructions non sémantiquement correctes.

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

Référence .

Answer 2

Vous devez mettre en œuvre deux méthodes de dissimulation. display: none fonctionne pour FF, mais pas pour Chrome ou IE. La deuxième méthode consiste donc à envelopper le <option> dans un <span> avec display: none . FF ne le fera pas (HTML techniquement invalide, selon la spécification) mais Chrome et IE le feront et masqueront l'option.

EDIT : Oh oui, j'ai déjà implémenté ceci dans jQuery :

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

EDIT 2 : Voici comment utiliser cette fonction :

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

EDIT 3 : Ajout d'une vérification supplémentaire suggérée par @user1521986

Answer 3

Je vous suggère de faire pas utiliser les solutions qui utilisent un <span> car il ne s'agit pas d'un code HTML valide, ce qui pourrait causer des problèmes par la suite. Je pense que la meilleure solution est de supprimer toutes les options que vous souhaitez masquer, et de les restaurer si nécessaire. En utilisant jQuery, vous n'aurez besoin que de ces 3 fonctions :

La première fonction permet de sauvegarder le contenu original du fichier sélectionnez . Par sécurité, vous pouvez appeler cette fonction lorsque vous chargez la page.

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

La fonction suivante appelle la fonction ci-dessus pour s'assurer que le contenu original a été sauvegardé, puis supprime simplement les options du DOM.

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
 }

La dernière fonction peut être utilisée chaque fois que vous voulez "réinitialiser" toutes les options d'origine.

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

Notez que toutes ces fonctions s'attendent à ce que vous transmettiez des éléments jQuery. Par exemple :

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

Voici un exemple concret : http://jsfiddle.net/9CYjy/23/

Answer 4

La réponse de Ryan P devrait être changée en :

    jQuery.fn.toggleOption = function (show) {
        $(this).toggle(show);
        if (show) {
            if ($(this).parent('span.toggleOption').length)
                $(this).unwrap();
        } else {
            **if ($(this).parent('span.toggleOption').length==0)**
                $(this).wrap('<span class="toggleOption" style="display: none;" />');
        }
    };

Sinon, il sera enveloppé dans trop de balises

Answer 5

La fonction toggleOption n'est pas parfaite et a introduit de méchants bogues dans mon application. jQuery s'embrouille avec .val() et .arraySerialize(). Essayez de sélectionner les options 4 et 5 pour voir ce que je veux dire :

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

$("#o3").toggleOption(false); 
$("#t").change(function(e) {
    if($(this).val() != this.value) {
    console.log("Error values not equal", this.value, $(this).val());
    }
});
</script>