Change the content of a div based on selection from Drop-down Menu
Simple way to dynamically show/hide content in a div based on the user's selection from Dropdown menu using Javascript. If a user selects 'option' then It display the content which is placed inside 'div' at the same time all other div's to be hidden.
Source code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv {
display: none;
}
.custab{
border: 1px solid #ccc;
padding: 5px;
margin: 5% 0;
box-shadow: 3px 3px 2px #ccc;
transition: 0.5s;
}
.custab:hover{
box-shadow: 3px 3px 0px transparent;
transition: 0.5s;
}
</style>
<body>
<div class="col-lg-2 col-lg-offset-5">
<a href=""><b>Select Blood Group:</b></a>
<select id="target">
<option value="">Select...</option>
<option value="content_1">A+ Blood</option>
<option value="content_2">A- Blood</option>
<option value="content_3">B+ Blood</option>
<select> </div>
<div id="content_1" class="inv">
<div class="container">
<div class="row col-md-6 col-md-offset-3 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Place</th>
<th>Mobile No.</th>
<th class="text-center">Blood Group</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>xxx</td>
<td>yyy</td>
<td>1111</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A+</a> </td>
</tr>
<tr>
<td>2</td>
<td>xxx</td>
<td>yyy</td>
<td>111</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A+</a> </td>
</tr><tr>
<td>3</td>
<td>xxx</td>
<td>yyy</td>
<td>111</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A+</a> </td>
</tr>
</table>
</div>
</div>
</div>
<div id="content_2" class="inv">
<div class="container">
<div class="row col-md-6 col-md-offset-3 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Place</th>
<th>Mobile No.</th>
<th class="text-center">Blood Group</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>add</td>
<td>add</td>
<td>add</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A-</a> </td>
</tr>
<tr>
<td>2</td>
<td>add</td>
<td>add</td>
<td>add</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A-</a> </td>
</tr><tr>
<td>3</td>
<td>add</td>
<td>add</td>
<td> add</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> A-</a> </td>
</tr>
</table>
</div>
</div></div>
<div id="content_3" class="inv">
<div class="container">
<div class="row col-md-6 col-md-offset-3 custyle">
<table class="table table-striped custab">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Place</th>
<th>Mobile No.</th>
<th class="text-center">Blood Group</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>add</td>
<td>add</td>
<td> add </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> B-</a> </td>
</tr>
<tr>
<td>2</td>
<td> add </td>
<td> add </td>
<td> add </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> B-</a> </td>
</tr><tr>
<td>3</td>
<td> add </td>
<td> add </td>
<td> add </td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"> B-</a> </td>
</tr>
</table>
</div>
</div></div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>
Result:
Figure(1) Please select Blood group category.
Figure(2) Selected category list will display with in a div.
Figure(3) If you add bootstrap.css to this htmlpage,means it will display like which is shown below.
Thanks for visiting....