We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now


dependent drop down box only visible after selecting one option

lucky20 asked
Medium Priority
Last Modified: 2012-05-11

I have a dependent drop down list box..

My first drop down will display list of teachers..
and second drop down will dispaly the classes they teach..(it is from 6th grade to 10th)..

When user select the 9th grade it will display a another drop down with sub sections..
The third drop down sholud not be visible until the user selects the '9th grade' in second drop down,.

Till now i worked with only two drop downs..
This drop down only visible when the option selected in second drop down box..

can any one have idea on this..
Watch Question



Thanks for providing link..
But here I am doing this in classic ASP.

Robert SchuttSoftware Engineer

It can be done in javascript and/or ASP;

* in javascript you can use events like onChange (like you probably already do) to set the 3rd select's visibility and contents (cross browser code for that should be easy to find)

* in ASP you could just write out the 3rd select only if a selection has been made in the 2nd select. You would still need an onChange event that submits the form when a selection is made, sort of emulating the postback mechanism in ASP.NET (a really little bit sort of...)

Is something like this helpful:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
var staff = [
    name: "Plato",
    grade: [
      { level: "6th", discipline: [ "Geometry", "Music", "Astronomy" ] },
      { level: "7th", discipline: [ "Arithmetic", "Geometry", "Music", "Astronomy" ] },
      { level: "8th", discipline: [ "Logic", "Arithmetic", "Geometry", "Music", "Astronomy" ] }
    name: "Socrates",
    grade: [
      { level: "9th", discipline: [ "Rhetoric", "Logic", "Arithmetic", "Geometry", "Music", "Astronomy" ] },
      { level: "10th", discipline: [ "Grammar", "Rhetoric", "Logic", "Arithmetic", "Geometry", "Music", "Astronomy" ] }

jQuery(document).ready( function() {
  $(staff).each( function() {
    $("#staff").append( $("<option/>").text(this.name) );  
  $("#staff").change( changeStaff );
  $("#grade").change( changeGrade );


function changeStaff() {

  var staffName = $(this).val();

  $(staff).each( function() {
    if ( this.name == staffName ) {
      $(this.grade).each( function() {
        $("#grade").append( $("<option/>").text( this.level ) );

function changeGrade() {
  if ( this.selectedIndex != 0 ) $("#discipline").toggle();

  var staffName = $("#staff").val();
  var gradeLevel = $(this).val();

  $(staff).each( function() {
    if ( this.name == staffName ) {
      $(this.grade).each( function() {
        if ( this.level == gradeLevel ) $(this.discipline).each( function( index, value ) {
          $("#discipline").append( $("<option/>").text( value ) );

<select id="staff">

<select id="grade">

<select id="discipline">


Open in new window


I will consider your idea..


thanks for giving an example..but it is dynamic list box... Anyway it will helps me to do..
I will try to change those fields and try..
Most Valuable Expert 2013
Unlock this solution and get a sample of our free trial.
(No credit card required)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.