Как скрыть элементы optgroup/option?

Есть ли способ скрыть элементы HTML option или optgroup? Я попытался вызвать hide() в jQuery, а также с помощью обычного Javascript для установки style.display='none'.

Он работает в Firefox, но не в других браузерах. Фактически удаление их из DOM работает, возможно, есть способ сохранить каждый элемент DOM при его удалении и повторно вставить их в одно и то же место?

Мой HTML выглядит так:

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

Ответ 1