如何隐藏optgroup标签？

Question

我需要去掉 optgroups 中的标签。

从这里：http : //i.stack.imgur.com/Gn5e5.png

成这个：http : //i.stack.imgur.com/ZvRM7.png

但我需要用 opgroups 来做到这一点。我不想删除它们。

<select>
  <optgroup>
    <option>1</option>
  </optgroup>
  <optgroup>
    <option>2</option>
  </optgroup>
  <optgroup>
    <option>3</option>
  </optgroup>
  <optgroup>
    <option>4</option>
  </optgroup>
</select>

jsfiddle：http : //jsfiddle.net/upXn8/

Answer 1

聚会有点晚了，但是：

optgroup { display: none; }

这在某些浏览器中不起作用，因为它将隐藏该optgroup元素，但选项是该元素的子元素，因此它们也将被隐藏。您可以display在子元素上设置 a ，但根据我的经验，这是行不通的。

可以使用的正确（并且语义上更正确！）版本（在 Chrome 42 和 IE 11 中测试）如下：

optgroup {
  visibility: hidden;
}
optgroup option {
  visibility: visible;
}

不幸的是，这将保留应用的间距optgroup（因为它不会从流中删除 optgroup 元素，它只是使其不可见），并且该间距不是填充/边距，因此这远非理想。

然而，不太确定浏览器兼容性。