JSFiddle - React, Tailwind, and code Playground

by k33npx

HTML

<h4>Your Tariff</h4>
							
							
							<div>
								Value Selected: <span id="current"></span>
								<br>
								<br>
								<select class="select" id="select">
    <option>Choose Your Option</option>
    <option name="Tarrif 1" value="t1"> 1</option>
    <option name="Tarrif 2" value="t2"> 2</option>
    <option name="Tarrif 3" value="t3"> 3</option>
    <option name="Tarrif 4" value="t4"> 4</option>
</select>
								 
          
								
							
					
							<div class="t1"><p>Tariff 1</p></div>
							<div class="t2"><p>Tariff 2</p></div>
							<div class="t3"><p>Tariff 3</p></div>
                            <div class="t4"><p>Tariff 4</p></div>
                        </div>

CSS

.t1
{display: none}

.t2
{display: none}

.t3
{display: none}

.t4
{display: none}

.select
{display:block}

JavaScript

function showSelectedItem() {

	
	
	
   var item = document.getElementById("select").value;
	
  document.getElementById("current").innerHTML = item;
  const classes = ['t1', 't2', 't3', 't4', 'select'];
  // hide all first;
  classes.forEach((classNode) => {
    document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
  });
	
}
document.getElementById("select").addEventListener("change", showSelectedItem);