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

I think the easier way to accomplish what you have in mind is to have three different dropdown lists in place of the second dropdown. Then, the first drop down can choose which one of those to show based on it's value.

Much simpler.

With that change, you can make your callback simply:

$('#refine').change(function () {
    var refine = $('option:selected', this).val().replace(/ /g, "-");

    $('.refined').removeClass('hidden').addClass('hidden');
    $('#'+refine).removeClass('hidden').removeAttr('disabled');
});

Edit: I forked your fiddle (and maybe edited your original?). It has the changes I suggested.

Answer 2

In the end I used jquery clone, which seemed to do the trick.

http://jsfiddle.net/3vPgY/10/

var everything = $('#everything').clone(true);

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

    var selectColour = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

        $('#everything').removeAttr('disabled');
        $('#everything').empty().append(everythingRefined);

    } else {

        $('#everything').attr('disabled', 'disabled');

    }

});

Answer 3

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("<span style='display:none' />");
        $("#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.

Answer 4

You cannot hide/remove individual options, only apply the attribute disabled on them. They will appear grey'ed out but won't be selectable.

You could progmatically keep a variable object that has all the data for the default configuration of the select. Then when you need to remove options you can but still have a way to know what needs to go into the select when all your conditions align.