Comment masquer une <option> dans un menu <select> avec CSS?

J'ai réalisé que Chrome, semble-t-il, ne me permettra pas de me cacher <option>dans un fichier <select>. Firefox le fera.

J'ai besoin de masquer les <option>s qui correspondent à un critère de recherche. Dans les outils Web Chrome, je peux voir qu'ils sont correctement définis display: none;par mon JavaScript, mais une fois que le <select>menu est cliqué, ils sont affichés.

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

Vous devez implémenter deux méthodes pour se cacher. display: nonefonctionne pour FF, mais pas 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 non valide, selon la spécification) mais Chrome et IE le feront et masqueront l'option.

EDIT: Oh ouais, j'ai déjà implémenté cela 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 vous utiliseriez 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

Pour HTML5, vous pouvez utiliser l'attribut «masqué».

<option hidden>Hidden option</option>

Il n'est pas pris en charge par IE <11. Mais si vous n'avez besoin que de masquer quelques éléments, il serait peut-être préférable de simplement définir l'attribut masqué en combinaison avec désactivé par rapport à l'ajout / suppression d'éléments ou à des constructions sémantiquement incorrectes.

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

Référence .

Je vous suggère de ne pas utiliser les solutions qui utilisent un <span>wrapper car ce n'est pas du HTML valide, ce qui pourrait causer des problèmes plus tard. Je pense que la solution préférée 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 enregistrera le contenu original de la sélection . Pour plus de 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
}

Cette fonction suivante appelle la fonction ci-dessus pour s'assurer que le contenu d'origine a été enregistré, 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 souhaitez "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 passiez 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 de travail: http://jsfiddle.net/9CYjy/23/

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 est enveloppé dans trop de balises

La fonction toggleOption n'est pas parfaite et a introduit de vilains bugs dans mon application. jQuery sera confondu 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>

Les entrées sélectionnées sont délicates de cette manière. Que diriez-vous de le désactiver à la place, cela fonctionnera entre les navigateurs:

$('select').children(':nth-child(even)').prop('disabled', true);

Cela désactivera tous les autres <option>éléments, mais vous pouvez sélectionner celui que vous voulez.

Voici une démo: http://jsfiddle.net/jYWrH/

Remarque: si vous souhaitez supprimer la propriété disabled d'un élément, vous pouvez utiliser .removeProp('disabled').

Mettre à jour

Vous pouvez enregistrer les <option>éléments que vous souhaitez masquer dans l'élément de sélection masqué:

$('#visible').on('change', function () {
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
});

Vous pouvez ensuite rajouter les <option>éléments à l'élément de sélection d'origine:

$('#hidden').children().appendTo('#visible');

Dans ces deux exemples, on s'attend à ce que l'élément de sélection visible ait l'id de visibleet que l'élément de sélection masqué ait l'id de hidden.

Voici une démo: http://jsfiddle.net/jYWrH/1/

Notez que .on()c'est nouveau dans jQuery 1.7 et que l'utilisation de cette réponse est la même que .bind(): http://api.jquery.com/on

Réponse simple: vous ne pouvez pas. Les éléments de formulaire ont des capacités de style très limitées.

La meilleure alternative serait de définir disabled=truel'option (et peut-être une couleur grise, puisque seul IE le fait automatiquement), ce qui rendra l'option non cliquable.

Sinon, si vous le pouvez, supprimez complètement l' optionélément.

// Simplest way

var originalContent = $('select').html();

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});

Puisque vous utilisez déjà JS, vous pouvez créer un élément SELECT masqué sur la page, et pour chaque élément que vous essayez de masquer dans cette liste, déplacez-le vers la liste masquée. De cette façon, ils peuvent être facilement restaurés.

Je ne connais pas de manière désinvolte de le faire en CSS pur ... J'aurais pensé que l'affichage: aucune astuce n'aurait fonctionné.

!!! AVERTISSEMENT !!!

Remplacez le deuxième "IF" par "WHILE" ou ne fonctionne pas!

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

Vous devez les supprimer de l' <select>utilisation de JavaScript. C'est le seul moyen garanti de les faire disparaître.

celui-ci semble fonctionner pour moi en chrome

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

Tard dans le match, mais la plupart semblent assez compliqués.

Voici comment je l'ai fait:

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) {

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) {
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    }

});

balisage de select-1:

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

balisage de select-2:

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>