Handling Select/option in html with javascript

I came across one situation where I have to show/hide text according to the option selected by user.






As shown in the image below, I have a drop down box. Here when user selects any option except first option ("Individua Team- No registration"), I want to display a some text.







Example: See image below.





Solution

HTML Code:
<select name="Team" id="Team" onchange="showDiv(this.value)">
<option value="noteam" selected>Individual-No Team</option>
<option value='Ben&Jerry' >Ben & Jerry</option>
<option value='Giants'>Giants</option>
<option value='Gladiators'>Gladiators</option>
<option value='greatestteam' >greatest team</option>
<option value='MyTeam'>My Team</option>
<option value='starone'>star one</option>
</select>
</form>

CSS:
.hiddenDiv {
display: none;
}
.visibleDiv {
display: block;
}

Javascript:
function showDiv(divName) {
// hide div
if (divName == 'Individual-no team') {
document.getElementById("teaminfo").className = "hiddenDiv";
}
else {
document.getElementById("teaminfo").className = "visibleDiv";
}
}