display: none 在 html 中的选项标签内不起作用答案

【问题标题】：display: none does not work inside option tag in htmldisplay: none 在 html 中的选项标签内不起作用
【发布时间】：2018-11-14 13:32:17
【问题描述】：

display: none; 在 html 的选项标签内不起作用。为什么？

html

<select>

<option data-color="green"> Option 1 
<div style="display: none;"> hiddenText </div>
</option>
<option data-color="red"> Option 1
</option>

</select>

jsfiddle

我将 style="display: none;" 应用于 textContent 等于 hiddenText 的节点。所以，我预计不会看到hiddenText，但我仍然看到它。我在这里错过了什么？

谢谢。

如果我们将 div inside 选项更改为 span，它仍然不起作用。

【问题讨论】：

我认为不可能在option 标签内添加div。 MDN quote: Permitted content: Text, possibly with escaped characters (like é)
@enxaneta，谢谢。有什么建议我该如何克服这个问题？
Hide options in a select list using jQuery的可能重复
我以为我可以用伪元素来做到这一点，但它也不起作用。请解释为什么需要在选项中隐藏文本。也许有一个解决方法。

标签： html css select option display

【解决方案1】：

我认为你不能这样做。 <option> 标签不能包含任何其他标签。

尝试使用一些库，例如Select2

【讨论】：

【解决方案2】：

HTML 标签在选项标签内被忽略。 w3

【讨论】：

【解决方案3】：

在网络浏览器中呈现视图后，选择文本不接受选项标签内的任何 div，无论您在选项标签中写入什么，它都会假定为文本

如果你检查你的 html 你会看到什么 html 部分进入视图是这样的这就是为什么您的 div 属性显示 none 不起作用的原因。

<select>
<option data-color="green"> Option 1 
 hiddenText 
</option>
<option data-color="red"> Option 1
</option>
</select>

【讨论】：