显示：none 在 html 中的选项标签内不起作用

Question

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 内部选项更改为 span 它仍然不起作用。

Answer 1

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

尝试使用一些库，例如 Select2

Answer 2

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

Answer 3

在 Web 浏览器中呈现视图后，select 文本不接受任何 div 选项标签内的内容，无论您在选项标签

中写入什么，它都将假定为文本

如果你检查你 html 你会看到什么 html 进入视野的部分是这样的这就是为什么你的 div 属性显示 none 不工作。

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

显示：none 在 html 中的选项标签内不起作用

display: none does not work inside option tag in html

html

css

select

option

display