display: none does not work inside option tag in html

Issue

display: none; does not work inside option tag in html. Why?

html

<select>

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

</select>

jsfiddle

I am applying the style="display: none;" to the node with textContent being equal to hiddenText. So, I am expecting not to see the hiddenText, but I still see it. What am I missing here?

Thank you.

If we change the div inside option to span it still does not work.

Solution

I think you can't do this. <option> tag can't contain any other tags.

Try to use some libraries like Select2

Answered By - Konstantin Kudelko