javascript - bootstrap - option selected html

¿Cómo ocultar elementos de optgroup/option?

Question

¿Hay alguna manera de ocultar elementos HTML option u optgroup ? He intentado llamar a hide() en jQuery, y también usar Javascript regular para configurar style.display=''none'' .

Funciona en Firefox pero no en otros navegadores. ¿En realidad, eliminarlos del DOM funciona, por lo que quizás haya una manera de guardar cada elemento DOM cuando se elimina y reinsertarlos en el mismo lugar?

Mi HTML es así:

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

Answer 1

Pensé que esta solución funciona bien para mí:

Hacer otra selección por ejemplo

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

luego esconderlo

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

Cuando quiera ''ocultar'' algún grupo opt, simplemente ''estacione'' en esta selección oculta.

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

De la misma manera puedes hacerlo visible. Esto es sólo los fragmentos de mi solución, que funciona bien para mí.