如何隐藏optgroup / option元素？

问题描述

有没有办法隐藏选项或 optgroup HTML元素？我试过在jQuery中调用 hide（），并且还使用常规Javascript来设置 style.display ='none'。

它适用于Firefox，但不适用于任何其他浏览器。实际上，将它们从DOM 中移除并不会起作用，所以也许有一种方法可以在每个DOM元素被移除时保存它们，并将它们重新放入同一个地方？

我的HTML是这样的：

 < select name =propsearch [area]id =propsearch_area> ; 
< option value =0>  - 任意 - < / 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 =低北街>低北街< / option> 
< / optgroup> 
< optgroup label =Swansea> 
< option value =Brynmill> Brynmill< / option> 
< option value =Uplands> Uplands< / option> 
< / optgroup> 
< / select> 
  

解决方案

我认为这个解决方案适用于我： / p>

制作另一个选择例如

  $（＃footer_canvas）。 （'< select id =parkingLot>< / select>'）; 
  

然后隐藏它

  $（ ＃parkingLot）隐藏（）; 
  

当您想'隐藏'一些optgroup时，只需将它'停放'在这个隐藏的选择中。

  $（'＃VehicleVehicleCategoryId optgroup [label =kategorie L]'）。appendTo（＃parkingLot）; 
  

您可以使其显示的方式相同。
这只是我解决方案的片段，对我来说工作正常。

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>

解决方案

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.

这篇关于如何隐藏optgroup / option元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！