Hiding Options of a Select with JQuery

Question

Okay, let's start with an example.
Keep in mind, this is only an example.

<select id = "selection1">
    <option value = "1" id = "1">Number 1</option>
    <option value = "2" id = "2">Number 2</option>
    <option value = "3" id = "3">Number 3</option>
</select>

Now from here, we have a dropdown with 3 options.
What I want to do now is to hide an option.

Adding style = "display:none" will not help.
The option would not appear in the dropdownlist, but using the arrow keys, you can still select it.
Essentially, it does exactly what the code says. It isn't displayed, and it stops there.

A JQuery function of $("#1").hide() will not work.
Plus, I don't only want to hide the option, I want to completely remove it.

Any possibility on doing so?
Do I have to use parent/sibling/child elements? If so, I'm still not sure how.

Any help on this would be greatly appreciated. Thanks.
    
    

Another question - It's related

Ok, so I found out that there is a .remove() available in JQuery. Works well.
But what if I want to bring it back?

if(condition)
    {
    $(this).remove();
    }

I can loops this. Shouldn't be complicated.
But the thing of which I am trying to do is this:

Maximum Capacity of Class: (Input field here)
Select Room: (Dropdown here)

What I'd like for it to do is to update is Dropdown using a function such as .change() or .keyup.
I could create the dropdown only after something is typed. At a change or a keyup, execute the dropdown accordingly.
But what I am doing is this:

$roomarray = mysql_query("SELECT *
    FROM
        (
        SELECT *,
        CASE
        WHEN type = 'Classroom' THEN 1
        WHEN type = 'Computer laboratory' THEN 2
        WHEN type = 'Lecture Hall' THEN 3
        WHEN type = 'Auditorium' THEN 4
        END AS ClassTypeValue
        FROM rooms
        ) t
    ORDER BY ClassTypeValue, maxppl, roomID");

echo "<select id = \"room\">";

while ($rooms = mysql_fetch_array($roomarray))
    { ?>
    <option value=<?php echo $rooms['roomID']; ?> id=<?php echo $rooms['roomID']; ?>><?php echo $rooms['type']; echo "&nbsp;"; echo $rooms['roomID']; echo "&nbsp;("; echo $rooms['maxppl']; echo ")"; ?></option>
    <?php
    }

echo "</select>";

Yes, I know it is very messy.
I plan to change it later on.

But the issue now is this: Can I toggle the removal of the options according to what has been typed?
Is it possible to do so with a dropdown made from a loop? Because I sure as hell can't keep executing SQL Queries. Or is that even an option? Because if it's possible, I still think it's a bad one.

Answer 1

The hide() doesn't work for Chrome... I've been experimenting with a work-around and wrapped it in a plugin I called "ExtraBox". The idea is to store the options temporary so we can enable / disable them by manipulating the DOM. I've created the plugin to make it easier to use.

I've posted the code on jsFiddle, so you can try it for yourself: http://jsfiddle.net/KeesCBakker/HaFRC/. [note: first project in jsFiddle, I'm loving it!]

Html example:

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>

I've added the following jQuery to my document.ready function:

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

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

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

The plugin looks like this:

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