隐藏选择下拉列表的初始文本？

Question

在我的示例代码中：

http://jsfiddle.net/TXPJZ/592/

我有一个<select>元素，初始文本为“Group ...”，我最初只想显示。当用户点击控件时，我不希望他们能够选择“Group ...”作为选项。所以我尝试从阵列中删除“Group ...”选项。

然而，这种方法有效，除非您单击表单然后在空白区域中单击关闭或选择“全部”以外的选项，否则“组...”的初始选择将停留在那里。此外，它会在列表底部生成克隆的“管理员”选项（无论如何都在Chrome中）。

有没有办法让这项工作或者我可以采取另一种方法？我想把表单初始化为空白选择并在其上面浮动一个单独的文本元素，它会说“Group ...”，我会在点击时隐藏它。该解决方案的问题是我预计文本将“阻止”点击进入下拉控件。

Answer 1

如果您希望文本不接受点击，您可以在该文本元素上设置pointer-events：none，如果IE＆lt; 11不符合您的支持标准。

也可以使用已禁用的optgroup标记（angular docs for option），类似于this question