javascript - 如何隐藏 optgroup/option 元素？

Question

有没有办法隐藏 option 或 optgroup HTML 元素？我试过在 jQuery 中调用 hide()，并使用常规 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>

Answer 1

我认为这个解决方案对我来说效果很好:

进行另一个选择，例如

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

然后隐藏它

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

当你想“隐藏”一些 optgroup 时，只需将它“停放在”这个隐藏的选择中即可。

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

同样的方式，你可以让它可见。这只是我的解决方案的片段，对我来说效果很好。