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

x

dependent drop down box only visible after selecting one option

lucky20
lucky20 asked
on
Medium Priority
956 Views
Last Modified: 2012-05-11
Hi,

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..
Comment
Watch Question

Author

Commented:
@khan_webguru

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

Robert SchuttSoftware Engineer
CERTIFIED EXPERT

Commented:
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">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26980320.html</title>
<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 );
  $("#discipline").toggle();

});

function changeStaff() {
  $("#grade>option:first").siblings().remove();

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

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

function changeGrade() {
  $("#discipline>option:first").siblings().remove();
  $("#discipline").hide();
  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 ) );
        });
      });
    }
  });
  
}
</script>
</head>
<body>

<select id="staff">
  <option>Select...</option>
</select>

<select id="grade">
  <option>Select...</option>
</select>

<select id="discipline">
  <option>Select...</option>
</select>

</body>
</html>

Open in new window

Author

Commented:
@robert
I will consider your idea..

@proculopsis:

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..
Developer
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
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.

OR

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.