[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

dependent drop down box only visible after selecting one option

Posted on 2011-04-27
6
Medium Priority
?
879 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..
0
Comment
Question by:lucky20
6 Comments
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35475447
0
 
LVL 1

Author Comment

by:lucky20
ID: 35475497
@khan_webguru

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

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 35475689
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 20

Expert Comment

by:Proculopsis
ID: 35476635

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
 
LVL 1

Author Comment

by:lucky20
ID: 35477191
@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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 35481530
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question