I want to implement a feature where a specific div is hidden based on the option selected from a drop-down menu.
Here's how it should work:
When the document loads, no div will be visible
Selecting option 1 will display OneLevel
Selecting option 2 will show TwoLevel
Selecting option 3 will reveal ThreeLevel
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#Level").hide();
function WorkflowLevel(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
$("#Level").hide();
switch (selected) {
case '0':
$("#Level").hide();
break;
case '1':
$("#Level").hide();
$("#Level#OneLevel").show();
break;
case '2':
$("#Level").hide();
$("#Level#TwoLevel").show();
break;
case '3':
$("#Level").hide();
$("#Level#ThreeLevel").show();
break;
}
}
</script>
</head>
<body>
<select id="WorkflowLevel" class="form-control" name="show_text_area" onchange="WorkflowLevel(this)">
<option value="0">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="Level OneLevel">1</div>
<div id="Level TwoLevel">2</div>
<div id="Level ThreeLevel">3</div>
</body>
</html>