JSFiddle - React, Tailwind, and code Playground

by georgesarkisss

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
<div class="elements">

<select id="opts" onchange="showForm()">
    <option value="0">Select Sensor</option>
    <option value="1">Temperature</option>
    <option value="2">Current</option>
</select>
<div id="f1" style="display:none">
   
        <select id="opts" onchange="showForm()">
            <option value="0">Select Type of Temp Sensor</option>
            <option value="1">Thermistor 5000K</option>
            <option value="2">Thermistor 10000K</option>
        </select>
 
</div>
<div id="f2" style="display:none">
        <select id="opts" onchange="showForm()">
            <option value="0">Select Type of Current</option>
            <option value="1">Option 2A</option>
            <option value="2">Option 2B</option>
        </select>

</div>






</div>
<script type="text/javascript">
    function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 0) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
        }
	if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display = "block";
            document.getElementById("f1").style.display = "none";
        }

    }
</script>

</body>
</html>

CSS

.elements {
  display: flex;
  justify-content: left;
  align-items: left;
  min-height: 100%;
}

.element__item {
  padding: 1rem;
  border: 1px solid #ccc;
  margin: 0.5rem;
}

JavaScript

function showForm() {
        var selopt = document.getElementById("opts").value;
        if (selopt == 0) {
            document.getElementById("f1").style.display = "none";
            document.getElementById("f2").style.display = "none";
        }
	if (selopt == 1) {
            document.getElementById("f1").style.display = "block";
            document.getElementById("f2").style.display = "none";
        }
        if (selopt == 2) {
            document.getElementById("f2").style.display = "block";
            document.getElementById("f1").style.display = "none";
        }

    }