View Full Version : Chained Drop Down List, Last in Chain Show/Hide a Div?

12-09-2011, 05:55 PM
Hi Everyone! I would genuinely appreciate some help on this one.

I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript.

This is how I'd like it to work:
-- User selects from DropDown List 1.
-- DropDown List 2 options appear based on the selection in 1.
-- User selects from DropDown List 2,
-- Appropriate div is shown.

Here's the Javascript I'm using to show/hide a div:

function showDiv(divID)
var div = document.getElementById(divID);
div.style.display = ""; //display div

function hideDiv(divID)
var div = document.getElementById(divID);
div.style.display = "none"; // hide

function hideAllDivs()
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)

function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for

Here's the Javascript for the chained drop down lists:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');

.append(child.data('options').filter('.sub_' + this.value))

childOptions.not('.static, .sub_' + parent.val()).remove();


cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');

cascadeSelect(deptartmentSelect, courseSelect);

And lastly, my HTML (simplified)

<form action="#" class="cascadeTest">
<td><select name="deptartmentSelect" class="deptartmentSelect">
<option value="0">Select a Department</option>
<option value="1">Dept A</option>
<option value="2">Dept B</option>
<option value="3">Dept C</option>
<td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
<option value="0" class="static">- Courses -</option>
<option value="A1" class="sub_1">Course A1</option>
<option value="B1" class="sub_2">Course B1</option>
<option value="C1" class="sub_3">Course C1</option>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>

Thanks again in advance!

12-09-2011, 09:33 PM
See if this fits your needs. :)

<title>Multi Select Boxes</title>

<style type="text/css">
.courseDiv { display:none; border:1px solid blue; background-Color:lightblue; min-height:300px; }

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Kiran Pai | http://www.codecoffee.com/
// Modified From: http://javascript.internet.com/forms/multi-value-drop-down-list-2.html
// Modified extensively again for: http://www.codingforums.com/showthread.php?t=245935

var Course_A= ["CA1|Math", "CA2|Alegbra", "CA3|Calculus", "CA4|Set Theory"];
var Course_B= ["CB1|Science", "CB2|Physics", "CB3|Chemistry", "CC4|Biology"];
var Course_C= ["CC1|Arts", "CC2|Painting", "CC3|Photography", "CC4|Laser Imaging"];

function set_course() {
var select_dept = document.myform.dept;
var select_course = document.myform.course;
var selected_dept = select_dept.options[select_dept.selectedIndex].value;

select_course.options[select_course.options.length] = new Option('Select Course','');
var tarr = [];
switch (selected_dept) {

case 'Dept_A' :
for(var i=0; i<Course_A.length; i++) {
tarr = Course_A[i].split('|');
select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);

case 'Dept_B' :
for(var i=0; i<Course_B.length; i++) {
tarr = Course_B[i].split('|');
select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);
// Note ability to merge two courses into one department
for(var i=0; i<Course_C.length; i++) {
tarr = Course_C[i].split('|');
select_course.options[select_course.options.length] = new Option(tarr[1],tarr[0]);

// default : alert('Invalid selection'); break; // un-necessary line

function ShowSelection(flag) {
var select_dept = document.myform.dept;
var select_course = document.myform.course;
var selected_dept = select_dept.options[select_dept.selectedIndex].value;
var selected_course = select_course.options[select_course.selectedIndex].value;
if (flag == false) {
alert('Selection: '+selected_dept+ ' : ' + selected_course);
} else {
var sel = document.getElementById('Courses').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
if (selected_course != '') {
document.getElementById(selected_course).style.display = 'block';


<form name="myform" method="POST">
<select name="dept" onchange="set_course()">
<option value="">Select Department</option>
<option value="Dept_A">Department A</option>
<option value="Dept_B">Department B</option>

<select name="course" onchange="ShowSelection(true)"
<option value=""> ------ </option>

<!-- for testing purposes
<button onclick="ShowSelection(false)">Show Selection</button>
<!-- -->

<div id="Courses">
<div id="CA1" class="courseDiv">I am Course A1</div>
<div id="CA2" class="courseDiv">I am Course A2</div>
<div id="CA3" class="courseDiv">I am Course A3</div>
<div id="CA4" class="courseDiv">I am Course A4</div>

<div id="CB1" class="courseDiv">I am Course B1</div>
<div id="CB2" class="courseDiv">I am Course B2</div>
<div id="CB3" class="courseDiv">I am Course B3</div>
<div id="CB4" class="courseDiv">I am Course B4</div>

<div id="CC1" class="courseDiv">I am Course C1</div>
<div id="CC2" class="courseDiv">I am Course C2</div>
<div id="CC3" class="courseDiv">I am Course C3</div>
<div id="CC4" class="courseDiv">I am Course C4</div>

03-22-2012, 05:14 PM
thank you so much
can i open a div instead of URL ?

03-22-2012, 08:17 PM
thank you so much
can i open a div instead of URL ?

What do you mean?
Give an example of where this is to occur.
I don't see any URL specified in the code I sent.

03-22-2012, 08:53 PM
sorry .. very sorry
i want to add one more selection to be 3 levels of choosen

03-23-2012, 01:26 AM
sorry .. very sorry
i want to add one more selection to be 3 levels of choosen
You need to give an example of what it is that you are trying to do.
My personal mind reading skills suck!

What is the 3rd level supposed to represent?
What have you tried on your own so far?