web-dev-qa-db-fra.com

Comment masquer certaines options avec JavaScript? (Navigateur croisé)

Cela devrait fonctionner:

$('option').hide(); // hide options

Cela fonctionne dans Firefox, mais pas dans Chrome (et probablement pas dans IE, non testé).

Un exemple plus intéressant:

<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();

// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>

Ou voir l'exemple à http://jsfiddle.net/TGxUf/

La seule option permettant de détacher les éléments d’option du DOM? Je dois leur montrer à nouveau plus tard, pour que cela ne soit pas très efficace.

javascriptjquerycross-browser
41
dave1010

Malheureusement, vous ne pouvez pas masquer les éléments option dans tous les navigateurs.

Dans le passé, lorsque j'avais besoin de faire cela, j'avais défini leur attribut disabled, comme ça ...

$('option').prop('disabled', true);

J'ai ensuite utilisé le masquage où il est pris en charge dans les navigateurs utilisant ce morceau de CSS ...

select option[disabled] {
    display: none;
}
57
alex

Comme il a été dit, vous ne pouvez pas display:none individual <option>s, car ce n’est pas le bon type d’éléments DOM. 

Vous pouvez définir .prop('disabled', true), mais cela ne fait qu'effleurer les éléments et les rendre non sélectionnables - ils occupent toujours de l'espace.

Une solution que j'utilise consiste à .detach() le <select> dans une variable globale lors du chargement de la page, puis à rajouter uniquement le <option>s que vous souhaitez à la demande. Quelque chose comme ça ( http://jsfiddle.net/mblase75/Afe2E/ ):

var $sel = $('#sel option').detach(); // global variable

$('a').on('click', function (e) {
    e.preventDefault();
    var c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

Au début, je pensais que vous auriez à .clone() le <option>s avant de les ajouter, mais apparemment pas. Le $sel global d'origine est inchangé après l'exécution du code click.

Si vous avez une aversion pour les variables globales, vous pouvez stocker l'objet jQuery contenant les options en tant que variable .data() sur l'élément <select> lui-même ( http://jsfiddle.net/mblase75/nh5eW/ ):

$('#sel').data('options', $('#sel option').detach()); // data variable

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'), // jQuery object
        c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});
22
Blazemonger

J'y ai eu un coup d'oeil moi-même et voici ce que j'ai proposé:

(function($){

    $.fn.extend({detachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            s.find(o).each(function() {
                d.Push($(this).detach());
            });
            s.data('selectOptions', d);
        });
    }, attachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            for (var i in d) {
                if (d[i].is(o)) {
                    s.append(d[i]);
                    console.log(d[i]);
                    // TODO: remove option from data array
                }
            }
        });
    }});   

})(jQuery);

// example
$('select').detachOptions('.removeme');
$('.b').attachOptions('[value=1]');');

Vous pouvez voir l'exemple à http://www.jsfiddle.net/g5YKh/

Les éléments option sont entièrement supprimés de selects et peuvent être rajoutés à nouveau par le sélecteur jQuery. 

Il faut probablement un peu de travail et de tests avant que cela fonctionne assez bien pour tous les cas, mais c'est assez bien pour ce dont j'ai besoin.

11
dave1010

Masquer un élément <option> n'est pas dans la spécification. Mais vous pouvez disable, ce qui devrait fonctionner avec plusieurs navigateurs.

$('option.hide').prop('disabled', true);

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

8
jAndy

Je sais que c'est un peu tard mais mieux vaut tard que jamais! Voici un moyen très simple pour y parvenir. Simplement avoir une fonction show and hide. La fonction de masquage ajoutera simplement chaque élément d’option à une balise d’étendue prédéterminée (cachée) (ce qui devrait fonctionner pour tous les navigateurs), puis la fonction show déplacera simplement cet élément d’option dans votre balise de sélection. ;)

function showOption(value){
    $('#optionHolder option[value="'+value+'"]').appendTo('#selectID');             
}

function hideOption(value){
    $('select option[value="'+value+'"]').appendTo('#optionHolder');
}
7
Matt T. McAlear

Vous pouvez essayez d’envelopper les éléments d’option dans une plage afin qu’ils ne soient pas visibles mais chargés dans le DOM. Comme ci-dessous

jQ('#ddlDropdown option').wrap('<span>');

Et décompressez l’option qui contient l’attribut 'sélectionné' comme suit pour afficher l’option déjà sélectionnée.

var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();

Cela fonctionne sur tous les navigateurs.

3
NeverEndingLearner

Trois ans de retard, mais Googling m'a amené ici et j'espère que ma réponse sera utile à quelqu'un d'autre.

Je viens de créer une deuxième option (que je cachais avec CSS) et d’utiliser Javascript pour déplacer le s en avant et en arrière entre eux.

<select multiple id="sel1">
  <option class="set1">Blah</option>
</select>
<select multiple id="sel2" style="display:none">
  <option class="set2">Bleh</option>
</select>

Quelque chose comme ça, et ensuite quelque chose comme cela déplacera un élément sur la liste (c'est-à-dire, le rendre visible). Évidemment, adaptez le code selon vos besoins.

$('#sel2 .set2').appendTo($('#sel1'))
3
SpoonNZ

Voici une option qui:

  • Fonctionne dans tous les navigateurs
  • Conserve la sélection actuelle lors du filtrage
  • Préserve l'ordre des éléments lors du retrait/de la restauration
  • Pas de hacks sales/HTML invalide

`

$('select').each(function(){
    var $select = $(this);
    $select.data('options', $select.find('option'));
});

function filter($select, search) {
    var $prev = null;
    var $options = $select.data('options');
    search = search.trim().toLowerCase();
    $options.each(function(){
        var $option = $(this);
        var optionText = $option.text();
        if(search == "" || optionText.indexOf(search) >= 0) {
            if ($option.parent().length) {
                    $prev = $option;
                return;
            }
            if (!$prev) $select.prepend($option);
            else $prev.after($option);
            $prev = $option;
        }
        else {
              $option.remove();
        }
    });
}

`

JSFiddle: https://jsfiddle.net/derrh5tr/

2
Wim Barelds

C'est possible si vous restez dans l'objet et que vous le filtrez rapidement. 

<select id="driver_id">
<option val="1" class="team_opion option_21">demo</option>
<option val="2" class="team_opion option_21">xyz</option>
<option val="3" class="team_opion option_31">ab</option>
</select>

-

team_id= 31;

var element = $("#driver_id");
originalElement = element.clone();  // keep original element, make it global


element.find('option').remove();   
originalElement.find(".option_"+team_id).each(function() { // change find with your needs
        element.append($(this)["0"].outerHTML); // append found options
});

https://jsfiddle.net/2djv7zgv/4/

2
Fatih Alp

Étant donné que vous avez indiqué que vous souhaitiez rajouter les options ultérieurement, je vous suggère de charger un tableau ou un objet avec le contenu de la zone de sélection lors du chargement de la page. Ainsi, vous disposez toujours d'une "liste principale" de la sélection d'origine vous devez le restaurer.

J'ai créé un exemple simple qui supprime le premier élément de la sélection, puis un bouton de restauration remet la zone de sélection à son état d'origine:

http://jsfiddle.net/CZcvM/

1
JayTee

Je pensais être brillant ;-)

En CSS:

option:disabled {display:none;}

Dans Firefox et Chrome, une sélection contenant uniquement les options activées a été créée. Agréable.

Dans IE, les options activées étaient affichées, les désactivés ne comportant que des lignes vierges, à leur emplacement d'origine. Mal.

Dans Edge, les options activées affichées en haut, suivies des lignes vides pour les options désactivées. Acceptable.

0
Leif Neland

Ceci est une version améliorée de la réponse de @ NeverEndingLearner:

  • support complet des navigateurs pour ne pas utiliser de CSS non supporté
  • postes de réserve
  • pas d'emballage multiple

$("#hide").click(function(){
  $("select>option.hide").wrap('<span>'); //no multiple wrappings
});

$("#show").click(function(){
  $("select span option").unwrap(); //unwrap only wrapped
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<button id="hide">hide</button>
<button id="show">show</button>

0
xam

Essaye ça:

$(".hide").css("display","none");

Mais je pense que ça n'a pas de sens de le cacher. si vous voulez l'enlever, il suffit de:

$(".hide").remove();
0
Tee Wu

Sur JS pur:

select = document.getElementById("select_id")                   
to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden')

dévoiler juste

to_hide.removeAttribute('hidden')
0
Andrey Suglobov

il suffit de modifier le code de dave1010 pour mes besoins

 (function($){
    $.fn.extend({hideOptions: function() {
        var s = this;
        return s.each(function(i,e) {
            var d = $.data(e, 'disabledOptions') || [];
            $(e).find("option[disabled=\"disabled\"]").each(function() {
                d.Push($(this).detach());
            });
            $.data(e, 'disabledOptions', d);
        });
    }, showOptions: function() {
        var s = this;
        return s.each(function(i,e) {       
            var d = $.data(e, 'disabledOptions') || [];
            for (var i in d) {
                $(e).append(d[i]);
            }
        });
    }});    
})(jQuery);

http://jsfiddle.net/AbzL3/1/

0
pavlickm