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>

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>

• javascript
• html
• jquery
• html-select
• optgroup

• In case R0MANARMY is correct and you're fine with just disabling them, $('optgroup[label=Swansea]').attr('disabled', true) seems to work fine. – Max Shawabkeh Commented Apr 28, 2010 at 17:29
• @MaxShawabkeh The disabled attribute on <option> only works from IE8 onwards. – Cobra_Fast Commented Sep 2, 2013 at 13:39

1 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.