I want to show the block according to the selected Option and other remaining should be hidden.But i am not getting the output as desired.Just the options are shown but their related div content is not shown.I am new to Javascript.How can handle this?
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('a').click) {
document.getElementById('displayA').style.display = 'block';
}
else if (document.getElementById('b').click){
document.getElementById('displayB').style.display = 'block';
}
else if (document.getElementById('c').click){
document.getElementById('displayC').style.display = 'block';
}
else{
document.getElementById('displayD').style.display = 'block';
}
}
</script><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select>
<option onclick="javascript:yesNocheck();" name="b" id="a" value="a">A</option>
<option onclick="javascript:yesNocheck();" name="b" id="b" value="b">B</option>
<option onclick="javascript:yesNocheck();" name="b" id="b" value="b">C</option>
<option onclick="javascript:yesNocheck();" name="b" id="b" value="b">D</option>
</select>
<div id="displayA" style="display:none">
A is clicked
</div>
<div id="displayB" style="display:none">
B is clicked
</div>
<div id="displayC" style="display:none">
C is clicked
</div>
<div id="displayD" style="display:none">
D is clicked
</div>
</body>
</html>
