L'option Masquer JQuery ne fonctionne pas dans IE et Safari

Je suis en train de cacher un peu d'options dans une liste déroulante à l'aide .hide(). Cela fonctionne parfaitement bien sous firefox et chrome, mais il ne fonctionne pas dans IE et Safari. Mon code d'origine est plus complexe, mais j'ai rétréci vers le bas à ce.

J'ai essayé plusieurs combinaisons et rien n'a fonctionné.

.hide() fonctionne, mais pas pour les choses de l'intérieur des balises d'option pour une raison quelconque.

Quelqu'un peut-il m'aider? C'est me rend fou. Merci beaucoup d'avoir pris le temps de contribuer à la!

Voici mon jscript:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

Voici le code HTML:

                <label for="prodName">Product Name:</label> 
                <input type="text" name="prodName" /><br />

                <label for="candy">Candy:</label> 
                <select name="candy" id="candy">
                        <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
                        <option value="1" class="wrapper1">Hide this 1</option>
                        <option value="2" class="wrapper1">Hide this 2</option>
                        <option value="3" class="wrapper2">Show this 1</option>     
                </select><br />

source d'informationauteur James Lin

  1. 10

    Cela fonctionne.. changer .montrer aux .showOption et .hideOption.
    Cependant ce toujours en sorte de suce dans IE parce que dans firefox, vous pouvez le faire cacher une option qui est sélectionnée. Donc, si "Sélectionner" est affiché et est caché. Firefox va encore dire "sélectionner". 

    $.fn.showOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).replaceWith(opt);
            $(span).remove();
        }
        opt.disabled = false;
        $(opt).show();
    }
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).hide();
        } else {
            $(opt).wrap("span").hide();
        }
        opt.disabled = true;
    }
});
return this;
}
  2. 8

    Vous avez raison. Certains navigateurs ne les laissez pas vous cacher option éléments. Vous aurez probablement besoin de les enlever.

    Bien que peut-être mieux (ou au moins une autre possibilité serait de les désactiver.

    $(".wrapper1").prop('disbled', true);
  3. 5

    Vous devez supprimer le option éléments.. les cacher avec display:none n'est pas pris en charge dans la plupart des navigateurs.

    CACHER

    var elems = $(".wrapper1").remove();

    MONTRER

    $('#candy').append(elems);
  4. 4

    J'ai essayé la solution qui utilise <span> autour des options, mais celle-ci ne fonctionne pas pour moi dans tous les navigateurs.

    J'ai fait un Plugin jQuery qui permet de résoudre ce très joliment. Avec elle, vous voulez faire cela:

    $('#selection1').hideOption('1');
$('#selection1').showOption('1');

    Vous pouvez masquer et afficher autant que vous voulez, et ils vont continuer leur ordre d'origine et tout .data('x') valeurs que vous avez attribué à la option. Il fonctionne dans tous les navigateurs. Vous pouvez voir que dans cet exemple: jsFiddle - Bascule Options du menu Déroulant

    Vous pouvez obtenir le Bascule Options du menu Déroulant plug-in. Si vous n'aimez pas les plugins, il suffit de copier le code JavaScript à partir de votre propre projet de fichier JavaScript. Voir la Lire les Docs lien sur le plug-in pour plus d'informations!

  5. 1

    J'ai trouvé une solution de contournement pour cela, il suffit de les envelopper avec du Jquery wrap()) à l'option que vous souhaitez masquer,il sera automatiquement cachés et déballer span avec l'unwrap() pour l'afficher de nouveau.

  6. 0

    J'ai essayé de plusieurs manières différentes, mais cette solution semble raisonnable et je l'ai utilisé dans mon code. Pas de plugins requis simple fonction registre à l'objet jquery

    Solution en un coup d'œil:

    (function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

    Ici est la mise en œuvre complète http://jsfiddle.net/8uxD7/3/