0

I need help to show different text upon selection form dropdown without javascript

i tried below code but it also use onchange event .

<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>

I need help from you to have the same functionality but without javascript.

Thanks

Priyanshu
  • 39
  • 1
  • 6
Muhammad Tanzeel Arshad
  • 203
  • 1
  • 16

1 Answers1

0

Unfortunately this will not be easily possible and even possible with current css 3 and HTML 5 standards.

Actually based on pseudo selectors and elements you can do the checkbox hack

The same checked tag applies and for <option> elements from <select>

So based on this selector you can for example hide the selected element from the <select> with code like in this StackOverflow comment

The main problem here is that based on this pseudo selector you can select only elements that are inside the <select> tag - this means other option tags next to the selected one.

In order to build a selector that selects the element #t from your example you will first need to go out for the options element level and select the <select> tag and look for some element after it that you can try modifying/making visible/invisible with a css. In the current selector specification you are not able to get the parent of some element. See this stackoverflow comment for any updates on that. So as of FEB 2020 you will need again to do this with JS which makes the current effort useless.

kamentk
  • 513
  • 3
  • 12