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.