Hi friends, today i will tell you how to show content dynamically using Javascript.
Here i am creating a drop down that contains 3 options when user click on any option than corresponding content will display to you.
Code :
<!DOCTYPE html>
<html>
<head>
<title>
Drop Down With Javascript
</title>
<style>
h1
{
display:none;
}
</style>
<script>
function liveShow()
{
var value=document.getElementById('city').value;
if(value=="Chennai")
{
document.getElementById("chennai").style.display="block";
document.getElementById("bangalore").style.display="none";
document.getElementById("delhi").style.display="none";
}
if(value=="Bangalore")
{
document.getElementById("bangalore").style.display="block";
document.getElementById("chennai").style.display="none";
document.getElementById("delhi").style.display="none";
}
if(value=="Delhi")
{
document.getElementById("delhi").style.display="block";
document.getElementById("chennai").style.display="none";
document.getElementById("bangalore").style.display="none";
}
}
</script>
</head>
<body>
<center>
<h1 id="chennai">Hey Chennai guy,Whats up</h1>
<h1 id="bangalore">Hey Bangalore guy,Whats up</h1>
<h1 id="delhi">Hey Delhi guy,Whats up</h1>
<select id="city" onchange="liveShow();">>
<option value="None">None</option>
<option value="Chennai">Chennai</option>
<option value="Bangalore">Bangalore</option>
<option value="Delhi">Delhi</option>
</select>
</center>
</body>
</html>
Output :
1)Initially following page will display.
2)Now when user choose Chennai then following page will display.
Comment below if you have any doubt or suggestions.
***********Thanks Friends**********
ok
ReplyDeleteThanks so much for another post. I be able to get that kind of information information. friend, and exactly.
ReplyDelete*South Western Asian nations * where no one has WMDs …
ReplyDelete