I'm having an issue displaying a specific div section when selecting an option from a dropdown menu. I've written the code below, but it doesn't seem to be working. Can anyone please assist me with this? My actual requirement is that I only want to show the particular div section when I select an option from the dropdown and then click the submit button.
function checkTenant(event) {
event.preventDefault();
var drpdownvalue = document.getElementById("tenentval").value;
alert(drpdownvalue)
if (drpdownvalue.value == "one" || drpdownvalue.value == "two") {
//alert(drpdownvalue)
document.getElementById("ifYes").style.display = "block";
//alert(drpdownvalue)
} else {
document.getElementById("ifYes").style.display = "none";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7b6179617d">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.3.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3a3bca3a3b6a1fdb9a093e2fde2e5fde2">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4908a928a96">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<select class="form-control" id="tenentval">
<option>Select</option>
<option value="one">1</option>
<option value="two">2</option>
</select>
</div>
</div>
<div class="col-md-2">
<button type="button" onclick="checkTenant(event)" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="row div1" style="display: none;" id="ifYes">
<div class="col-md-12">
<div class="div1" style="width: 100px; height:100px; border:1px solid #f00"></div>
</div>
</div>
</div>
</body>
</html>