Cascading DropDown Lists.. help changing this example.

[Mad_T]

The code below works well. But I have one issue I'm hoping is simple to fix.

There are 3 dropdown lists:
As you change A, B updates, Change B then C updates.

This appears to be being done using the Value returned from A, to match the Class in B.

Then the Value from B is being used to match the class in C.

This is fine apart from I need to be able to use the value fields in B and C.. Is there any way to update this so the following would work ?

Set classes against the values in A.
Match the class from A to the class in B, match the class in B to the class in C.

That way I can use the values from A, B or C ??

Thanks

<label for="categories">categories: </label> 
<select name="categories" id="categories"> 
    <option value="1">people</option> 
    <option value="2">food</option> 
    <option value="3">computer parts</option> 
    <option value="4">other</option> 
</select> 

<label for="items">items: </label> 
<select name="items" id="items"> 
    <option class="1" value="0">john</option> 
    <option class="1" value="1">george</option> 
    <option class="1" value="2">maria</option> 
    <option class="1" value="3">kostas</option> 

<option class="1" value="4">petros</option> 
<option class="1" value="5">aleksis</option> 
<option class="1" value="6">nikos</option> 
<option class="1" value="7">niki</option> 
<option class="1" value="8">haris</option> 
<option class="2" value="9">banana</option> 

<option class="2" value="10">milo</option> 
<option class="2" value="11">souvlaki</option> 
<option class="2" value="12">pagoto</option> 
<option class="2" value="13">beer</option> 
<option class="2" value="14">water</option> 
<option class="2" value="15">cocacola</option> 

<option class="2" value="16">patates</option> 
<option class="3" value="17">othoni</option> 
<option class="3" value="18">pliktrologio</option> 
<option class="3" value="19">mouse</option> 
<option class="3" value="20">HD</option> 
<option class="3" value="21">floppy</option> 

<option class="3" value="22">modem</option> 
<option class="3" value="23">router</option> 
<option class="3" value="24">TFT</option> 
<option class="4" value="25">foo</option> 
<option class="4" value="26">bar</option> 
</select>

//Applies cascading behavior for the specified dropdowns 
function applyCascadingDropdown(sourceId, targetId) { 
    var source = document.getElementById(sourceId); 
    var target = document.getElementById(targetId); 
    if (source && target) { 
        source.onchange = function() { 
            displayOptionItemsByClass(target, source.value); 
        } 
        displayOptionItemsByClass(target, source.value); 
    } 
} 

//Displays a subset of a dropdown's options 
function displayOptionItemsByClass(selectElement, className) { 
    if (!selectElement.backup) { 
        selectElement.backup = selectElement.cloneNode(true); 
    } 
    var options = selectElement.getElementsByTagName("option"); 
    for(var i=0, length=options.length; i<length; i++) { 
        selectElement.removeChild(options[0]); 
    } 
    var options = selectElement.backup.getElementsByTagName("option"); 
    for(var i=0, length=options.length; i<length; i++) { 
        if (options[i].className==className) 
            selectElement.appendChild(options[i].cloneNode(true)); 
    } 
} 

//Binds dropdowns 
function applyCascadingDropdowns() { 
    applyCascadingDropdown("categories", "items"); 
    //We could even bind items to another dropdown 
    applyCascadingDropdown("items", "foo"); 
} 

//execute when the page is ready 
window.onload=applyCascadingDropdowns;

[vivek151189]

yes there is a way but you need to use the ajax for that purpose
the better solution is to use the jquery-ajax
or You can google dependent dropdownlist in php

[Bonesnap]

The object of this approach isn't to "auto select" one drop down based on the selection of another, but rather to "filter" the choices based on the previous selection.

Typically for this approach your drop downs would have an "onchange" event attached to them. When they're changed, the event fires and the JavaScript executes an AJAX call to a PHP script, which pulls values from the database based on what was selected (you pass this value as an argument). The PHP script then sends back these results and your JavaScript event handles it appropriately (in this case, as <option></option> elements).

[Mad_T]

Thanks for the replies.
I like this type of solution as it's all within one page which will make it easier for me.

The device I plan to run this on isn't a true web server, so all in one seems easier to me.

Anyway this code can be amended to allow class to be used ? or anyone with a similar example ?

Thanks

[Mad_T]

Anyone any ideas on this ?
Thanks

[vivek151189]

What is the problem with the above given solution as it is easy to do the stuff with ajax javascript than whats the problem with you ?