Display: none не работает внутри тега option в html
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>
Я применяю style = "display: none;" к узлу с textContent, равным hiddenText. Итак, я не ожидал увидеть hiddenText, но все еще вижу его. Что мне здесь не хватает?
Спасибо.
Если мы изменим параметр div inside на span, он все равно не будет работать.
@enxaneta, спасибо. Любые предложения, как я могу это преодолеть?
Возможный дубликат Скрыть параметры в списке выбора с помощью jQuery
Я думал, что смогу сделать это с помощью псевдоэлементов, но это тоже не работает. Объясните, почему вам нужно скрывать текст внутри опции. Может есть обходной путь.
Ответы 3
Я думаю, ты не сможешь этого сделать.
Тег <option> не может содержать никаких других тегов.
Попробуйте использовать библиотеки типа Выбрать2
Теги HTML игнорируются внутри тега option. w3
после рендеринга представления в веб-браузере выбранный текст не принимает никакой div внутри тега option, он примет в качестве текста все, что вы напишете в теге option
если вы проверите свой html, вы увидите, какая часть html появляется в поле зрения, как это вот почему ваше свойство div не работает.
<select>
<option data-color = "green"> Option 1
hiddenText
</option>
<option data-color = "red"> Option 1
</option>
</select>
Я не думаю, что возможно добавить
divвнутрь тегаoption. Цитата MDN: Разрешенное содержимое: текст, возможно, с экранированными символами (например, & eacute;)