Cacher les Options d'un Select avec JQuery

Le cacher() ne fonctionne pas pour Chrome... j'ai fait des expériences avec un travail autour de l'enveloppa d'un plugin que j'ai appelé "ExtraBox". L'idée est de stocker les options temporaire afin que nous puissions activer /désactiver en le manipulant le DOM. J'ai créé ce plugin pour le rendre plus facile à utiliser.

J'ai posté le code sur jsFiddle, de sorte que vous pouvez l'essayer pour vous-même: http://jsfiddle.net/KeesCBakker/HaFRC/. [note: le premier projet dans jsFiddle, j'adore!]

Exemple de code Html:

Select:
<br/>
<select id="TestKees">
    <option value="1" class="s1">First value</option>
    <option value="2" class="s2">Second value</option>
    <option value="3" class="s3">Third value</option>
</select>
<br/>
Enable / Disable
<br/>
<input id="txt" type="text" value="s2" />
<button id="btnEnable">Enable</button>

J'ai ajouté ce qui suit jQuery à mon document.prêt de la fonction:

$('#TestKees').extraBox({ attribute: 'class' });

$('#btnEnable').click(function(){
    $('#TestKees').data('extraBox').enable(
        $('#txt').val()
    );
});

$('#btnDisable').click(function(){
    $('#TestKees').data('extraBox').disable(
        $('#txt').val()
    );  
});

Le plugin ressemble à ceci:

(function($) {
//Create ExtraBox object
function ExtraBox(el, options) {
//Default options for the plugin (configurable)
this.defaults = {
attribute: 'class'
};
//Combine default and options objects
this.opts = $.extend({}, this.defaults, options);
//Non-configurable variables
this.$el = $(el);
this.items = new Array();
};
//Separate functionality from object creation
ExtraBox.prototype = {
init: function() {
var _this = this;
$('option', this.$el).each(function(i, obj) {
var $el = $(obj);
$el.data('status', 'enabled');
_this.items.push({
attribute: $el.attr(_this.opts.attribute),
$el: $el
});
});
},
disable: function(key){
$.each(this.items, function(i, item){
if(item.attribute == key){
item.$el.remove();
item.$el.data('status', 'disabled'); 
} 
});
},
enable: function(key){
var _this = this;
$.each(this.items, function(i, item){
if(item.attribute == key){
var t = i + 1; 
while(true)
{
if(t < _this.items.length) {   
if(_this.items[t].$el.data('status') == 'enabled')  {
_this.items[t].$el.before(item.$el);
item.$el.data('status', 'enabled');
break;
}
else {
t++;
}   
}
else {                                                                               _this.$el.append(item.$el);
item.$el.data('status', 'enabled');
break;
}                   
}
} 
});     
}
};
//The actual plugin - make sure to test
//that the element actually exists.
$.fn.extraBox = function(options) {
if (this.length) {
this.each(function() {
var rev = new ExtraBox(this, options);
rev.init();
$(this).data('extraBox', rev);
});
}
};
})(jQuery);

OriginalL'auteur Kees C. Bakker

Autant que je sache, ce n'est pas possible
en mode natif. Vous pouvez disable un
<option> nœud tho. Pour completlely
masquer/supprimer il vous fallait écrire
certains de code personnalisé.

$('option').attr('disable', true);

Par la manière, vous ne devriez pas utiliser un seul
numéro de l'ID d'un élément. Utilisation
somekind de préfixe, c'est à dire option_1.

il est réellement possible de cacher un <option> nœud, mais pas de la croix-navigateur compatible.

OriginalL'auteur jAndy

J'ai mis à disposition 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. 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!

OriginalL'auteur Glen Little