Masquer l'option de sélection dans IE en utilisant jQuery
J'utilise actuellement jQuery pour masquer/afficher les options de sélection à l'aide du code suivant.
$("#custcol7 option[value=" + sizeValue + "]").hide();
Cela fonctionne bien dans Firefox, mais ne fait aucun bien dans les autres navigateurs. Comment masquer les options de sélection dans Chrome, Opera et IE?
Je viens de découvrir cela et au lieu de cloner à plusieurs reprises la sélection sélectionnée, je viens de remplacer les options à masquer par des éléments span et de masquer les étendues (bien que le navigateur ne les ait pas visuellement affichées de toute façon, je pense). changez votre code (si complexe) pour parcourir les étendues de la logique complexe.
Les plages stockent une référence à la variable option et se remplacent elles-mêmes quand elles doivent être affichées.
Ce code peut évidemment être remanié et prettifié.
http://fiddle.jshell.net/FAkEK/12/show/
EDIT # 2 (USE THIS INSTEAD): Je me suis dit qu'au lieu de faire tout ce clone/référence/remplacement de la merde, il suffit d'envelopper l'option avec une étendue, de masquer la plage et de simplement remplacer la plage par l'option à nouveau ..
Je pense que meder a fourni une réponse valide et la modifie légèrement pour refléter ce qui fonctionne pour moi:
$.fn.optVisible = function( show ) {
if( show ) {
this.filter( "span > option" ).unwrap();
} else {
this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
}
return this;
}
Testé avec (longue vie à BrowserStack):
- Windows XP: IE 6.0, Firefox 3.0, Safari 4.0, Opera 10.0, Chrome 14.0
- Windows 8: IE 10.0 Metro
- iOS 3.2 (iPad), iOS 6.0 (iPhone 5)
- Android 1.6 (Sony Xperia X10)
Ce n'est pas le cas, il n'est pas pris en charge dans IE (et probablement pas dans Chrome ou Opera). Si vous souhaitez qu’elles soient réellement invisibles, vous devez supprimer toutes les options et les rajouter ultérieurement. Mais dans la plupart des cas, un simple disabled="disabled" devrait suffire et est bien plus simple que de gérer la suppression et l'ajout d'options.
essayez detach () . vous pouvez le rattacher ultérieurement si nécessaire en utilisant append () ou insertAfter ()
Pour supprimer les options, utilisez:
var opt=$("option").detach();
Pour afficher les options, utilisez:
opt.appendTo( "select" );
Vient de le supprimer et de le stocker dans une variable dans votre JavaScript. Vous pouvez simplement créer le nouvel objet lorsque vous en aurez besoin ultérieurement.
Sinon, essayez l'attribut disabled mentionné ci-dessus.
comme vous l'avez fait, cela devrait fonctionner en chrome mais en nvm.Voici une autre façon
select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();
et si vous voulez le montrer à nouveau:
select.append('<option value="'+sizeValue+'"></option>');
Il fonctionne parfaitement sur tous les navigateurs et son code très simple. Le problème, c’est que si vous voulez masquer plusieurs options, c’est plus dactylographié .. mais cela peut être résolu en les mettant dans des variables si elles ne changent pas dynamiquement de cette façon:
var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';
select.append(options);
De cette façon, si vous devez supprimer/ajouter à plusieurs endroits, vous n’avez tapé que les options une fois.Espoir que j’ai donné une autre option intéressante. Meilleures salutations.
/**
* Change visibility of select list option elements
* @param {boolean} stateVal show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
});
};
Mon point de vue est un peu différent des autres réponses.
L'objectif n'est pas de masquer les options mais simplement de les désactiver (pour que l'interface utilisateur reste cohérente).
Mon scénario:
J'ai plusieurs sélections dans un formulaire et lorsqu'un utilisateur sélectionne une option dans l'une des sélections, l'autre sélection sélectionne cette option et inversement. Il est interdit à l'utilisateur de sélectionner la même option que celle déjà sélectionnée. Nous désactivons normalement l'option mais pour IE 7 qui ne la prend pas en charge. L'utilisateur obtient également une option pour ajouter de nouvelles sélections.
Solution :
En charge :
Si le navigateur est IE7, lors de la sélection et de la désactivation des options déjà sélectionnées, j’ajoute un attribut personnalisé à l’option ("data-ie7-disabled") et modifie également la couleur des options désactivées en "#cccccc" (qui est la couleur standard pour les options désactivées). Cela rend l'interface utilisateur identique à travers les navigateurs.
Sur le changement :
Je sauvegarde l'option précédente dans une variable locale (celle-ci est sauvegardée dans le focus).
Lorsqu'un utilisateur tente de changer une option
L'utilisateur sélectionne une nouvelle option complète qui n'est sélectionnée dans aucun autre menu déroulant. Ensuite, je passe en revue d'autres sélections, change la couleur et ajoute un attribut personnalisé à cette option sélectionnée sur d'autres sélections.
Lorsque l'utilisateur sélectionne une option déjà sélectionnée (l'option dont la couleur est grisée). Je vérifie si l'option a d'abord cet attribut personnalisé. Si c'est le cas>, je rétablis simplement l'option précédente avec un message d'erreur disant "Cette option est déjà sélectionnée ou BLAH BLAH".
Lorsque l'utilisateur modifie son option existante en une nouvelle option qui n'est sélectionnée dans aucune autre liste déroulante. Je boucle encore à travers toutes les autres options de sélection et supprime la couleur sur elle ainsi que l'attribut personnalisé.
J'espère que cela t'aides.
Vous pouvez utiliser des combinaisons de var $opt=$('select>option').clone() et $('select option[value="'+val+'"').remove(). Il y a un autre exemple: essayez ceci. https://jsfiddle.net/sherali/jkw8fxzf/12/
var $secondOption= $('#second-choice>option').clone();
$("#first-choice").change(function() {
var userSelected = $(this).val();
$('#second-choice').html($secondOption);
$('#second-choice option[value="'+userSelected+'"').remove()
});
Il y a aussi la méthode .load:
s_parent.change(function(){
s_child.load('./fetch_options.php",{'v',s_parent.val()});
}
Le script 'fetch_options.php' afficherait simplement les balises option en fonction de la source de données utilisée et de la ou des valeurs parent transmises.
Dans IE 11 (Edge), le code suivant fonctionne.
$("#id option[value='1']").remove();
et de revenir en arrière,
$('<option>').val('1').text('myText').appendTo('#id');
en utilisant la solution fournie par AuthorProxy, cela fonctionne très bien pour IE, mais lorsque j'essaie de créer un fichier .val () dans la liste déroulante de Firefox, je reçois des valeurs géniales qui n'ont aucun sens. J'ai modifié leur option pour inclure des fonctionnalités spécifiques du navigateur, masquer/afficher des travaux pour Firefox.
$.fn.toggleOptionVisibility = function (stateVal) {
var isBool = typeof stateVal === "boolean";
return this.each(function () {
var $this = $(this);
if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
if (isBool) {
if (stateVal) $this.filter("span > option").unwrap();
else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
}
else {
$this.filter("span > option").toggleOptionVisibility(true);
$this.filter(":not(span > option)").toggleOptionVisibility(false);
}
}
else {
if (isBool) {
$this.show();
}
else {
$this.hide();
}
}
});
};
Vous pouvez également remplacer le code HTML dans la sélection.
Html:
<input id="Button1" type="button" value="hide option" />
<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>
Jquery:
$("#Button1").change(function () {
$('#foo').html('<option >stuff</option>');
});
Pas exactement ce que vous voulez, mais peut-être que ça aide. Pour les petites listes déroulantes, c'est certainement plus facile.
Vous pouvez utiliser ceci:
$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});
Cela fonctionne très bien sur tous les navigateurs sauf Safari et Opera. Je cherche une autre meilleure solution :)
Vous devrez le supprimer, puis l'ajouter à nouveau pour Internet Explorer.
Retirer:
$("#custcol7 option[value=" + sizeValue + "]").remove();
Ajouter:
$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );
Notez que vous devez également avoir sizeValue dans le texte de l’option pour pouvoir visualiser quelque chose.
La solution de meder est celle que j’ai choisie, mais avec un petit ajustement pour l’empêcher d’envelopper une option dans une étendue déjà existante:
$.fn.hideOption = function() {
this.each(function() {
if (!$(this).parent().is('span')) {
$(this).wrap('<span>').hide();
}
});
};
$.fn.showOption = function() {
this.each(function() {
var opt = $(this).find('option').show();
$(this).replaceWith(opt);
});
};