дисплей: ни один не работает внутри тега option в html

Question

display: none; не работает внутри тега option в 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

HTML-теги игнорируются внутри тега option. w3

Answer 2

после рендеринга представления в веб-браузере выделенный текст не принимает какой-либо div внутри тега option, он будет восприниматься как текст независимо от того, что вы пишете в теге option

, если вы проверите html, вы увидите часть what htmlтак выглядит ваше свойство div, которое не работает.

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

Answer 3

Я думаю, ты не можешь этого сделать. Тег <option> не может содержать другие теги.

Попробуйте использовать некоторые библиотеки, такие как Select2