• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 883
  • Last Modified:

dependent drop down box only visible after selecting one option

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..
0
lucky20
Asked:
lucky20
1 Solution
 
khan_webguruCommented:
0
 
lucky20Author Commented:
@khan_webguru

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

0
 
Robert SchuttSoftware EngineerCommented:
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...)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ProculopsisCommented:

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

0
 
lucky20Author 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..
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have tried a bunch of these things and this one really seems to be the easiest.   http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

Just ad your jquery  file then add the below code.

---------


<script type="text/javascript">      
function makeSublist(parent,child,isSubselectOptional,childVal)
{
      $("body").append("<select style='display:none' id='"+parent+child+"'></select>");
      $('#'+parent+child).html($("#"+child+" option"));
 
      var parentValue = $('#'+parent).attr('value');
      $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
 
      childVal = (typeof childVal == "undefined")? "" : childVal ;
      $("#"+child).val(childVal).attr('selected','selected');
 
      $('#'+parent).change(function(){
            var parentValue = $('#'+parent).attr('value');
            $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
            if(isSubselectOptional) $('#'+child).prepend("<option value='none' selected='selected'> -- Select -- </option>");
            $('#'+child).trigger("change");
            $('#'+child).focus();
      });
}
 
$(document).ready(function()
{
      makeSublist('child','grandsun', true, '');      
      makeSublist('parent','child', false, '1');      
});
</script>

----------------

Next simply use asp to make your drop downs



      <option value="<%=(rs1.Fields.Item("ID").Value)%>"><%=(rs1.Fields.Item("Name1").Value)%></option>
          <%
  rs1.MoveNext()
Wend
If (rs1.CursorType > 0) Then
  rs1.MoveFirst
Else
  rs1.Requery
End If
%>
</select>
<br>
<strong>Select Team</strong><br>
<select name="Team" id="child">

  <%
While (NOT rsSelectTeam.EOF)
%>
  <option class="sub_<%=(rs2.Fields.Item("ID").Value)%>" value="<%=(rs2.Fields.Item("Name").Value)%>"><%=(rs2.Fields.Item("Name").Value)%></option>
  <%
  rs2.MoveNext()
Wend
If (rs2.CursorType > 0) Then
  rs2.MoveFirst
Else
  rs2.Requery
End If
%>
      
</select>
 
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now