1

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

enter image description here

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.

aynber
  • 22,380
  • 8
  • 50
  • 63
Yaroslav Trofimov
  • 313
  • 2
  • 4
  • 16
  • 1
    I don't think it's possible to add a `div` inside an `option` tag. [MDN quote: Permitted content: Text, possibly with escaped characters (like é)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) – enxaneta Nov 14 '18 at 13:35
  • @enxaneta, thank you. Any suggestions how can I overcome this? – Yaroslav Trofimov Nov 14 '18 at 13:39
  • Possible duplicate of [Hide options in a select list using jQuery](https://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery) – ElusiveCoder Nov 14 '18 at 13:48
  • I thought I can do it with pseudo elements but it doesn't work either. Please explain why do you need to hide text inside an option. Maybe there is a workaround. – enxaneta Nov 14 '18 at 13:51

3 Answers3

3

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

Try to use some libraries like Select2

Konstantin Kudelko
  • 350
  • 3
  • 12
0

HTML tags are ignored inside option tag. w3

enter image description here

Nikita Rogatnev
  • 113
  • 1
  • 9
0

after rendering the view in web browser the select text not accept any div inside option tag it will assume as a text whatever you write in option tag

if you inspect you html you will see the what html part coming in view is like this that's why your div property display none not working.

<select>
<option data-color="green"> Option 1 
 hiddenText 
</option>
<option data-color="red"> Option 1
</option>
</select>
Subhash Viswakarma
  • 77
  • 3