Masquer les options dans une liste de sélection à l'aide de jQuery
J'ai un objet avec des paires d'options clé/valeur que je souhaite masquer/supprimer d'une liste de sélection . Aucun des sélecteurs d'options suivants ne fonctionne. Qu'est-ce que je rate?
$.each(results['hide'], function(name, title) {
$("#edit-field-service-sub-cat-value option[value=title]").hide();
$("#edit-field-service-sub-cat-value option[@value=title]").hide();
});
Pour ce que ça vaut, le second formulaire (avec le @) n'existe pas dans jQuery 1.3. Le premier ne fonctionne pas car vous attendez apparemment une interpolation variable. Essaye ça:
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
Notez que cela va probablement casser de différentes manières si title contient des métacaractères du sélecteur jQuery.
Vous ne pouvez pas faire ce x-browser. Si je me souviens, c.-à-d. Le plus simple est de conserver une copie clonée de la sélection avant de supprimer des éléments. Cela vous permet de supprimer facilement les éléments manquants, puis de les annexer.
J'ai trouvé un meilleur moyen, et c'est très simple:
$("option_you_want_to_hide").wrap('<span/>')
Pour afficher à nouveau, il suffit de trouver cette option (pas span) et $("option_you_want_to_show").unwrap().
Il a été testé sur Chrome et Firefox.
Voici mon tour, probablement un peu plus rapide en raison de méthodes natives DOM
$.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();
}
});
});
Cela peut être fait avec plusieurs navigateurs; il faut juste une 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 (car vous ne pouvez pas avoir de tableaux associatifs en JavaScript). Ensuite, lorsque vous modifiez la catégorie, il analyse les options existantes (la première fois seulement) les écrit dans #optionstore, efface tout et ne remet que celles associées à la catégorie.
NOTE: J'ai créé ceci pour permettre différentes valeurs d'option du texte affiché à l'utilisateur, donc c'est très flexible.
Le 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>
Le 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 en cachant 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 celle de Firefox et passe le focus à la 2e option (en supposant que sa valeur = "2"). Si nous l'omettons, l'option est désactivée, mais l'option "activée" est toujours affichée avant que nous ne la déposions. Par conséquent, nous passons le focus à une autre option pour éviter cela.
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);
Regardez cette question et les réponses -
Désactiver les options de sélection ...
En regardant votre code, vous devrez peut-être citer la valeur de l'attribut
$("#edit-field-service-sub-cat-value option[value='title']").hide();
from sélecteurs d'attributs jQuery
Les citations sont facultatives dans la plupart des cas, mais devrait être utilisé pour éviter les conflits quand la valeur contient des caractères comme "]"
MODIFIER:
Je viens de me rendre compte que vous obtenez le titre du paramètre function, auquel cas la syntaxe devrait être
$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();
Votre meilleur choix est de définir disabled = true sur les éléments d’option que vous souhaitez désactiver, puis dans CSS set.
option:disabled {
display: none;
}
Ainsi, même si le navigateur ne permet pas de masquer l’élément désactivé, il ne peut toujours pas être sélectionné. Toutefois, sur les navigateurs qui le font le supportent, ils seront masqués.
Le problème est qu’Internet Explorer ne semble pas prendre en charge les méthodes de masquage et d’affichage des options de sélection . Je voulais masquer toutes les options de ma sélection ddlReasonCode pour laquelle le type actuellement sélectionné n’était pas la valeur de l’attribut "attType" .
Alors que la belle Chrome était assez satisfaite de:
//Hiding all options
$("#ddlReasonCode").children().hide();
//Showing only the relevant options
$("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();
C’est ce que IE demandait (enfants, n’essayez pas cela 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/
J'essayais de masquer les options d'une liste de sélection en fonction de l'option sélectionnée d'une autre liste de sélection. Cela fonctionnait dans Firefox3, mais pas dans Internet Explorer 6. J'ai quelques idées ici et j'ai une solution maintenant, alors j'aimerais 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>");
});
}
}
Le 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é qu'il fonctionnait dans Firefox 3 et Internet Explorer 6.
Après avoir testé, les solutions affichées ci-dessus par divers, y compris le chaos, pour masquer des éléments fonctionnent maintenant dans les dernières versions de Firefox (66.0.4), Chrome (74.0.3729.169) et Edge (42.17134.1.0)
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();
Pour IE, cela ne fonctionne pas, mais vous pouvez désactiver l'option
$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");
puis forcez la sélection d'une valeur différente.
$("#edit-field-service-sub-cat-value").val("0");
Notez que pour une option désactivée, la valeur du menu déroulant sera désormais nulle et non la valeur de l'option sélectionnée si elle est désactivée.
Il semble que vous deviez également mettre à jour l'attribut "sélectionné". Sinon, l'option actuellement sélectionnée risque de continuer à s'afficher - bien qu'elle disparaisse probablement lorsque vous sélectionnez une option (c'est ce qu'elle a fait pour moi): Essayez de procéder ainsi:
$('#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.
Pour éviter la concaténation de chaînes, 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 à enregistrer 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);
};
};
faites ceci pour utiliser l'objet:
var filterObject = new SelectFilter();
filterObject.showFooBarOptions ();
J'ai implémenté une solution utilisant une fonction qui filtre une liste déroulante (<select>) en fonction d'attributs de données personnalisés. Cette solution prend en charge:
- Avoir un
<option>pour montrer quand le filtre laisserait la sélection vide. - Respecte les attributs sélectionnés existants.
- Les éléments
<option>sans l'attribut data-filter ne sont pas modifiés.
Testé avec jQuery 2.1.4 et Firefox, Chrome, Safari et IE 10+.
Voici 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, il vous suffit d'appeler la fonction avec la valeur que vous souhaitez conserver.
filterCombobox($("#myCombobox"), 2, true);
Ensuite, la sélection résultante 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 d'origine sont stockés par la fonction data (), ainsi les appels suivants ajouteront et supprimeront les éléments corrects.
Pour cacher option dans sélectionnez utiliser:
option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item
Où option_node is HTMLOptionElement
P.S .: Je n'utilise pas JQuery, mais je suppose que ça va marcher:
$('.my_select option[value="my_cool_value"]').hidden = true
Je trouvais préférable de simplement supprimer le DOM complètement.
$(".form-group #selectId option[value='39']").remove();
Compatible avec tous les navigateurs. Fonctionne aussi sur IE11
$("option_you_want_to_hide").addClass('hidden')
Ensuite, dans votre css, assurez-vous d'avoir
.hidden{
display:none;
}
La réponse indique que @ n'est pas valide pour les nouvelles itérations jQuery. Bien que ce soit correct, certains anciens IE ne cachent toujours pas les éléments optionnels. Pour tous ceux qui doivent gérer des éléments d'option de masquage dans les versions concernées, j'ai posté une solution de contournement ici:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
En gros, enveloppez-le d'une portée et remplacez-le.
Je sais que cette question a été répondu. Mais mon exigence était légèrement différente. 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/>');
Toute personne tombant sur cette question pourrait également envisager l’utilisation de Choisi , ce qui étend considérablement les capacités de certaines personnes.