Ausblenden von Optionen eine Auswählen mit JQuery

Den hide() funktioniert nicht bei Chrome... ich habe experimentiert mit einem work-around und wickelte es in ein plugin, das ich als "ExtraBox". Die Idee ist, zum speichern der Optionen temporär so können wir aktivieren /deaktivieren Sie durch manipulieren des DOM. Ich habe das plugin um es einfacher zu machen zu verwenden.

Ich gebucht habe, den code auf jsFiddle, so können Sie versuchen, es für sich selbst: http://jsfiddle.net/KeesCBakker/HaFRC/. [Hinweis: erste Projekt in jsFiddle, ich Liebe es!]

Html-Beispiel:

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>

Ich habe die folgende jQuery-zu meinem Dokument.die bereit-Funktion:

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

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

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

Das plugin sieht wie folgt aus:

(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);

Soweit ich weiß, ist dies nicht möglich
nativ. Sie können disable eine
<option> Knoten tho. Zu completlely
ausblenden/löschen, Sie würde schreiben müssen
einige benutzerdefinierte code.

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

Durch die Art und Weise, Sie sollten nicht einen einzigen
Zahl als ID für ein element. Verwenden
allerdings etwas Präfix, d.h. option_1.

es tatsächlich möglich ist, zu verbergen <option> Knoten, aber nicht cross-browser-kompatibel.

Ich habe ein jQuery-Plugin, das löst das sehr schön. Mit ihm, würden Sie dies tun:

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

Können Sie verstecken und Ihnen zeigen, wie viel Sie wollen, und Sie behalten Ihre ursprüngliche Reihenfolge. Es funktioniert in allen Browsern. Sie können sehen, dass in diesem Beispiel: jsFiddle - Toggle Dropdown-Optionen

Können Sie die Toggle Dropdown-Optionen-plug-in. Wenn Sie nicht wie die plugins, kopieren Sie einfach den JavaScript-code aus, um ein eigenes Projekt der JavaScript-Datei. Finden Sie die Lesen Sie die Dokumentation link für das plug-in für mehr Informationen!