How to hide optgroup/option elements?

Question

Is there a way to hide option or optgroup HTML elements? I've tried calling hide() in jQuery, and also using regular Javascript to set style.display='none'.

It works in Firefox but not in any other browsers. Actually removing them from the DOM does work, so perhaps there's a way to save each DOM element when it's removed, and reinsert them in the same place?

My HTML is like this:

<select name="propsearch[area]" id="propsearch_area">
    <option value="0">- Any -</option>
    <optgroup label="Bristol">
        <option  value="Hotwells">Hotwells</option>
        <option  value="Montpelier">Montpelier</option>
    </optgroup>
    <optgroup label="Cardiff">
        <option  value="Heath">Heath</option>
        <option  value="Roath">Roath</option>
    </optgroup>
    <optgroup label="Exeter">
        <option  value="Pennsylvania Road">Pennsylvania Road</option>
        <option  value="Lower North Street">Lower North Street</option>
    </optgroup>
    <optgroup label="Swansea">
        <option  value="Brynmill">Brynmill</option>
        <option  value="Uplands">Uplands</option>
    </optgroup>
</select>

Diamante

In case R0MANARMY is correct and you're fine with just disabling them, $('optgroup[label=Swansea]').attr('disabled', true) seems to work fine. – Waterage

@MaxShawabkeh The disabled attribute on <option> only works from IE8 onwards. – Munster

Answer 1

I figured that this solution works fine for me:

Make another select e.g.

$("#footer_canvas").after('<select id="parkingLot"></select>');

then hide it

$("#parkingLot").hide();

When you want to 'hide' some optgroup, just 'park' it in this hidden select.

$('#VehicleVehicleCategoryId optgroup[label="kategorie L"]').appendTo("#parkingLot");

Same way you can make it visible. This is just the snippets of my solution, that works fine for me.

Backler

Another way would be to just store the data in a JSON object that you can manipulate instead of the hidden select. – Countersign