JavaScript Chained Drop Down List that Show/Hide a Div?

Question

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 (I am admittedly more of a designer). I would appreciate anyone taking the time to help me out with this.

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, and 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++)
    {
        hideDiv(courseSelect.options[i].value);
    }
}

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)');
    child.data('options',childOptions);

    parent.change(function(){
        childOptions.remove();
        child
        .append(child.data('options').filter('.sub_' + this.value))
        .change();
    })

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

}

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

    cascadeSelect(deptartmentSelect, courseSelect);
});

And lastly, my HTML (simplified)

<form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
    <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>
      </select></td>
  </tr>
  <tr>
    <th>Territory:</th>
    <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>
      </select></td>
  </tr>
</table>
</form>
<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!

Answer 1

Looks like you have some jQuery intermingled with raw javascript here. FYI, some of the functions you wrote are not necessary, as they are already included in jQuery.

First of all, get rid of your showDiv and hideDiv functions. These can each be done with a single line of jQuery:

$('#divId').show();
$('#divId').hide();

As for your hideAllDivs and toggle functions, these can be rewritten too.

function hideAllDivs() {
    // fyi, your select element does not have id="courseSelect".
    // I am using name to select it, but you could also use class
    // to use the id selector, your select has to have id="courseSelect"
    $('select[name="courseSelect"] option').each(function() {
        $('#' + $(this).val()).hide();
    });
}

function toggle(showId) {
    hideAllDivs();
    $('#' + showId).show();
}

To show or hide a div when the user selects from dropdownlist 2, you can use the jQuery change method. No need to have an onchange="javascript" attribute on your HTML element:

$('select[name=courseSelect]').change(function() {
    toggle($(this).find('option:selected').val());
});