显示：在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 inside选项更改为跨度，则仍然无法使用。

Answer 1

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

尝试使用某些库，例如Select2

Answer 2

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

Answer 3

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

如果您检查html，您将看到视图中出现的html部分是这样的 这就是为什么您的div属性不显示任何内容的原因。

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