How to hide html form select option?

Question

I have a very simple form which I would like to hide select options when another select field refines it.

Currently I have tried dispay: none as an inline s

Answer 1

This is not the best way to do things, it's best to dynamically build your selects. HOWEVER, if you must do it this way, use the following code:

    $('#refine').change(function () {

        var selected = $(this).val();
        $("#everything option").wrap("");
        $("#everything option." + selected).unwrap();
        $("#everything").attr('disabled',false);

});

I forked it here: http://jsfiddle.net/AyX9Q/

Bear in mind, the code is minimal, just to show you how to wrap options in spans and hide them. It doesn't do any logic to show all options if you revert to the "please select" on the first select.