Hiding dropdown using Javascript
I started working on a task where we need to display drop down based on the text selected in another drop down. The contents of the second drop down are retrieved though an AJAX call.
Here’s and example which does displays a drop down with three values Admin, Student and Teacher. on selection of a teacher, a grades drop down will be displayed.
<html>
<body>
<script TYPE=”text/javascript”>
function handleGrades(obj) {
if(obj.value== 2){
buildGradesDropDown();
document.getElementById(”GradesDropDown”).style.visibility = “visible”;
} else{
document.getElementById(”GradesDropDown”).style.visibility = “hidden”;
}
}
function buildGradesDropDown() {
var dropdown = ‘Grade : <select name=”selGradeId” id=”selGradeId” >’;
//Ajax call should be here, to retrieve the data for the dropdown
dropdown += getOption(’first’,1);
dropdown += getOption(’second’,2);
dropdown += getOption(’third’,3);
dropdown += ‘</select>’;
document.getElementById(”GradesDropDown”).innerHTML = dropdown;
//alert(document.getElementById(”GradesDropDown”).innerHTML);
}
function getOption(value,display) {
return ‘<Option value=’+value+’>’+display +’</option>’;
}
</script>
<form >
Select Role
<select name=”selSchoolId” id=”day” onchange=”handleGrades(this);”>
<option value=”1″>Admin</option>
<option value=”2″>Student</option>
<option value=”3″>Teacher</option>
</select>
<div id=”GradesDropDown” style=”visibility:hidden”>
</div>
</form>
</body>
</html>
Written by Ravi Nallakukkala on May 14th, 2007 with no comments.
Read more articles on Uncategorized.