Cacher des options dans une liste de sélection en utilisant jQuery

vous ne pouvez pas faire ce X-browser. Si je me souviens bien, ie a des problèmes. La chose la plus facile à faire est de conserver une copie clonée du select avant de supprimer des éléments, ce qui vous permet de supprimer facilement et puis d'ajouter les éléments manquants.

j'ai trouvé une meilleure façon, et c'est très simple:

$("option_you_want_to_hide").wrap('<span/>')

Pour montrer de nouveau, il suffit de trouver cette option(pas de durée) et $("option_you_want_to_show").unwrap() .

il a été testé sur Chrome et Firefox.

Voici mon spin, probablement un peu plus rapide en raison des méthodes DOM natives

$.each(results['hide'], function(name, title) {                     
    $(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
      if( option.value == title ) {
        option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
      }
    });
});

Il PEUT être fait de la croix-navigateur; il faut juste un peu de programmation personnalisée. S'il vous plaît voir mon violon à http://jsfiddle.net/sablefoste/YVMzt/6 / . Il a été testé pour fonctionner dans Chrome, Firefox, Internet Explorer et Safari.

en bref, j'ai un champ caché, #optionstore , qui stocke le tableau séquentiellement (puisque vous ne pouvez pas avoir de tableaux associatifs en JavaScript). Ensuite, lorsque vous changez de catégorie, il passe les options existantes (première fois seulement) écrit dans #optionstore , efface tout, et met en arrière que ceux associés à la catégorie.

NOTE: je l'ai créé pour permettre des valeurs d'option différentes du texte affiché à l'utilisateur, il est donc très flexible.

the HTML:

<p id="choosetype">
    <div>
        Food Category:
    </div>
    <select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
        <option value="">All Food</option>
        <option value="Food1">Fruit</option>
        <option value="Food2">Veggies</option>
        <option value="Food3">Meat</option>
        <option value="Food4">Dairy</option>
        <option value="Food5">Bread</option>
    </select>
    <div>
        Food Selection
    </div>
    <select name="foodType" id="foodType" size="1">
        <option value="Fruit1" class="sub-Food1">Apples</option>
        <option value="Fruit2" class="sub-Food1">Pears</option>
        <option value="Fruit3" class="sub-Food1">Bananas</option>
        <option value="Fruit4" class="sub-Food1">Oranges</option>
        <option value="Veg1" class="sub-Food2">Peas</option>
        <option value="Veg2" class="sub-Food2">Carrots</option>
        <option value="Veg3" class="sub-Food2">Broccoli</option>
        <option value="Veg4" class="sub-Food2">Lettuce</option>
        <option value="Meat1" class="sub-Food3">Steak</option>
        <option value="Meat2" class="sub-Food3">Chicken</option>
        <option value="Meat3" class="sub-Food3">Salmon</option>
        <option value="Meat4" class="sub-Food3">Shrimp</option>
        <option value="Meat5" class="sub-Food3">Tuna</option>
        <option value="Meat6" class="sub-Food3">Pork</option>
        <option value="Dairy1" class="sub-Food4">Milk</option>
        <option value="Dairy2" class="sub-Food4">Cheese</option>
        <option value="Dairy3" class="sub-Food4">Ice Cream</option>
        <option value="Dairy4" class="sub-Food4">Yogurt</option>
        <option value="Bread1" class="sub-Food5">White Bread</option>
        <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
    <span id="optionstore" style="display:none;"></span>
</p>

the JavaScript/ jQuery:

$(document).ready(function() {
    $('#category').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });
});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }

    //Delete everything
    $('option[class^="sub-"]').remove();

    // Put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#foodType').html(populateoption);
}

function rewriteoption(myfilter) {
    //Rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";

    myfilterclass = (myfilter != "")?myfilterclass:"all";

    //First variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}

cela fonctionne dans Firefox 3.0, mais pas dans MSIE 8, ni dans Opera 9.62:

jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');

mais plutôt cacher une option, on peut simplement la désactiver:

jQuery('#destinations').val('2'); 
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');

la première des deux lignes ci-dessus est pour Firefox et passe focus à la deuxième option (en supposant qu'elle a Valeur="2"). Si nous l'omettons, l'option est désactivée, mais l'option "enabled" s'affiche avant que nous la laissions tomber. Par conséquent, nous passons focus à une autre option pour éviter cela.

regardez cette question et les réponses -

désactiver les options de sélection...

en Regardant votre code, vous pouvez avoir besoin de citer la valeur de l'attribut

$("#edit-field-service-sub-cat-value option[value='title']").hide();

from jQuery attribut selectors

les citations sont optionnelles dans la plupart des cas, mais devrait être utilisé pour éviter les conflits lorsque la valeur contient des caractères comme "]"

EDIT:

vient de réaliser que vous obtenez le titre à partir du paramètre de fonction, auquel cas la syntaxe devrait être

$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();

en référence à la suggestion de redsquare, j'ai fini par faire ceci:

var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();

et ensuite inverser ceci:

$("#edit-field-service-sub-cat-value").append(selectItems);

votre meilleur pari est de définir disabled=true sur les éléments d'option que vous voulez désactiver, puis dans CSS set

option:disabled {
    display: none;
}

de cette façon, même si le navigateur ne supporte pas de cacher l'élément désactivé, il ne peut toujours pas être sélectionné.. mais sur les navigateurs qui do le supportent, ils seront cachés.

le problème est Qu'Internet Explorer ne semble pas supporter les méthodes hide and show pour sélectionner des options. Je voulais cacher toutes les options de mon ddlReasonCode sélectionnez qui n'ont pas le type actuellement sélectionné comme valeur de l'attribut "attType".

alors que la belle Chrome était tout à fait satisfait de:

//Hiding all options
            $("#ddlReasonCode").children().hide();
            //Showing only the relevant options
            $("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();

C'est ce QU'il faut (les enfants, ne l'essayez pas chez CHROME : -)):

//Hiding all options
            $("#ddlReasonCode option").each(function (index, val) {
                if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
                    $(this).wrap('<span>').hide();
            });
            //Showing only the relevant options
            $("#ddlReasonCode option").each(function (index, val) {
                if (this.nodeName.toUpperCase() === 'OPTION') {
                    var span = $(this).parent();
                    var opt = this;
                    if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
                        $(opt).show();
                        $(span).replaceWith(opt);
                    }
                }
            });

j'ai trouvé cette idée d'emballage à http://ajax911.com/hide-options-selecbox-jquery/

il semble que vous ayez aussi à mettre à jour l'attribut" selected". Sinon l'option actuellement sélectionnée peut continuer à s'afficher-bien qu'elle disparaîtra probablement lorsque vous allez réellement sélectionner une option (c'est ce qu'elle a fait pour moi): Essayez de faire ceci:

$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();  
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.

j'essayais de masquer les options d'une liste de sélection selon l'option choisie à partir d'une autre liste de sélection. Il fonctionnait dans Firefox3, mais pas dans Internet Explorer 6. J'ai quelques idées ici et j'ai une solution Maintenant, donc je voudrais partager:

le code JavaScript

function change_fruit(seldd) {
    var look_for_id=''; var opt_id='';
    $('#obj_id').html("");
    $("#obj_id").append("<option value='0'>-Select Fruit-</option>");
    if(seldd.value=='0') {
        look_for_id='N';
    }
    if(seldd.value=='1'){
        look_for_id='Y';
        opt_id='a';
    }
    if(seldd.value=='2') {
        look_for_id='Y';
        opt_id='b';
    }
    if(seldd.value=='3') {
        look_for_id='Y';
        opt_id='c';
    }

    if(look_for_id=='Y') {
        $("#obj_id_all option[id='"+opt_id+"']").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
    else {
        $("#obj_id_all option").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
}

the HTML

<select name="obj_id" id="obj_id">
    <option value="0">-Select Fruit-</option>
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
    <option value="0">All</option>
    <option value="1">Starts with A</option>
    <option value="2">Starts with B</option>
    <option value="3">Starts with C</option>
</select>

<select name="obj_id_all" id="obj_id_all" style="display:none;">
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

il a été vérifié comme travaillant dans Firefox 3 et Internet Explorer 6.

pour éviter la concaténation de chaîne, vous pouvez utiliser jQuery.grep

$($.grep($("#edit-field-service-sub-cat-value option"),
         function(n,i){
           return n.value==title;
         })
 ).hide()

probablement pas aussi élégant ou aussi réutilisable qu'un plugin jquery. mais une autre approche consiste simplement à sauvegarder les éléments d'option et à les échanger selon les besoins:

var SelectFilter = function ()
        {
            this.allOptions = $("#someSelect option");

            this.fooBarOptions= $("#someSelect option[value='foo']");
            this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));


            this.showFooBarOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.fooBarOptions);
            };
            this.showAllOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.allOptions);
            };



        };

pour utiliser l'objet:

var filterObject = new SelectFilter();
filterObject.showFooBarOptions (); 

j'ai implémenté une solution en utilisant une fonction qui filtre un combobox ( <select> ) basée sur des attributs de données personnalisés. Cette solution prend en charge:

• ayant un <option> pour indiquer quand le filtre quitterait le select vide.
• respecte les attributs sélectionnés existants.
• <option> les éléments sans l'attribut data-filter sont laissés intacts.

Testé avec jQuery 2.1.4 et Firefox, Chrome, Safari et IE 10+.

C'est L'exemple HTML:

<select id="myCombobox">
  <option data-filter="1" value="AAA">Option 1</option>
  <option data-filter="1" value="BBB">Option 2</option>
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
  <option data-filter="3" value="EEE">Option 5</option>
  <option data-filter="3" value="FFF">Option 6</option>
  <option data-filter-emptyvalue disabled>No Options</option>
</select>

le code jQuery pour le filtrage:

function filterCombobox(selectObject, filterValue, autoSelect) {

  var fullData = selectObject.data("filterdata-values");
  var emptyValue = selectObject.data("filterdata-emptyvalue");

  // Initialize if first time.
  if (!fullData) {
    fullData = selectObject.find("option[data-filter]").detach();
    selectObject.data("filterdata-values", fullData);
    emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
    selectObject.data("filterdata-emptyvalue", emptyValue);
    selectObject.addClass("filtered");
  }
  else {
    // Remove elements from DOM
    selectObject.find("option[data-filter]").remove();
    selectObject.find("option[data-filter-emptyvalue]").remove();
  }

  // Get filtered elements.
  var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");

  // Attach elements to DOM
  selectObject.append(toEnable);

  // If toEnable is empty, show empty option.
  if (toEnable.length == 0) {
    selectObject.append(emptyValue);
  }

  // Select First Occurrence
  if (autoSelect) {
    var obj = selectObject.find("option[selected]");
    selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
  }
}

pour l'utiliser, vous appelez simplement la fonction avec la valeur que vous voulez garder.

filterCombobox($("#myCombobox"), 2, true);

puis le select résultant sera:

<select id="myCombobox">
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
</select>

les éléments originaux sont stockés par la fonction data (), ainsi les appels suivants seront ajouter et supprimer les éléments corrects.

la réponse indique que @ n'est pas valide pour les itérations jQuery plus récentes. Bien que ce soit exact, certains s plus anciens ne cachent toujours pas les éléments d'option. Pour toute personne ayant à faire avec cacher des éléments d'option dans les versions concernées, j'ai posté un contournement ici:

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE /

en gros, il suffit de l'envelopper avec une portée et de remplacer sur le spectacle.

quiconque trébuche sur cette question pourrait également envisager l'utilisation de choisi , ce qui élargit considérablement les capacités des sélections.

$("option_you_want_to_hide").addClass('hidden')

ensuite, dans votre css assurez-vous que vous avez

.hidden{
    display:none;
}

je sais qu'on a répondu à cette question. Mais mes exigences étaient légèrement différentes. Au lieu de valeur, je voulais filtrer par texte. J'ai donc modifié la réponse de @William Herry comme ceci.

var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").unwrap();
   });
}
else{
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
   });
}

de cette façon, vous pouvez utiliser la valeur aussi en remplaçant contient comme ceci

 $("div#ovrcateg option[value=" + this + "]").wrap('<span/>');

Pour masquer option dans , sélectionnez utiliser:

option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item

où option_node est HTMLOptionElement

P. S.: Je n'utilise pas JQuery, mais deviner, que c'est la volonté fonctionne:

$('.my_select option[value="my_cool_value"]').hidden = true

j'ai trouvé le meilleur pour enlever le DOM complètement.

$(".form-group #selectId option[value='39']").remove();

compatible avec les navigateurs croisés. Fonctionne sur IE11 trop

$('#id').val ($('option # id:eq (0)').hide());

option:eq(0)-option masquer à l'index '0' dans la boîte de sélection.