Как показать и скрыть текст при выборе из опций выбора без javascript

Question

Мне нужна помощь, чтобы отобразить другой текст при выпадающем списке формы без javascript

. Я пробовал приведенный ниже код, но он также использует событие onchange.

<div>
    <select onchange="if(selectedIndex!=0)document.getElementById('t').innerHTML=options[selectedIndex].value;">
          <option value="">&lt; select an option &gt;</option>
          <option value="term 1">term 1</option>
          <option value="term 2">term 2</option>
          <option value="term 3">term 3</option>
    </select>
</div>
<div id="t"></div>

Мне нужна ваша помощь, чтобы имеют те же функции, но без javascript.

Спасибо

Answer 1

К сожалению, это будет нелегко и даже невозможно с текущими стандартами css 3 и HTML 5.

На самом деле на основе псевдоселекторов и элементов вы можете сделать флажок

Тот же тег checked применяется и для <option> элементов из <select>

Таким образом, на основе этого селектора вы можете, например, скрыть выбранный элемент из <select> с кодом как в этом комментарии StackOverflow

Основная проблема здесь заключается в том, что на основе этого псевдоселектора можно выбирать только элементы, которые находятся внутри тега <select> - это означает, что другие теги параметров рядом с выбранный.

Чтобы построить селектор, который выбирает элемент #t из вашего примера, вам сначала нужно go для уровня элемента параметров и выбрать тег <select> и поискать некоторые элемент после него, который вы можете попробовать изменить / сделать видимым / невидимым с помощью css. В текущей спецификации селектора вы не можете получить родителя какого-либо элемента. См. комментарий stackoverflow для любых обновлений на этом. Таким образом, начиная с FEB 2020 вам нужно будет снова сделать это с JS, что делает текущее усилие бесполезным.