Linked select boxes coming back 'sel.selectedIndex undefined' on second select area... why?

I've got chained/linked select boxes. Everything works fine if the first select box is chosen, then the second, etc. However. What I want to do is when someone changes the first select area, the second is autopopulated, and the third is also autopopulated based on the first option in the second box.

Here is the code I'm using so far:

function loadTypes(sel)
{
    var whichCurr = sel.options[sel.selectedIndex].value;
    if(whichCurr.length>0){
        var theIndex2 = newAjax2.length;
        newAjax2[theIndex2] = new sack();

        newAjax2[theIndex2].requestFile = 'getTypes.php?theType='+whichCurr;    // Specifying which file to get
        newAjax2[theIndex2].onCompletion = function(){ createTypes(theIndex2) };    // Specify function that will be executed after file has been found
        newAjax2[theIndex2].runAJAX();      // Execute AJAX function

    }

}


function createTypes(theIndex2)
{
    var obj3 = document.getElementById('types');
        document.getElementById('types').options.length = 0;    // Empty city select box
        eval(newAjax2[theIndex2].response); // Executing the response from Ajax as Javascript code
            getModelList('types');

}

You'll notice at the end of createTypes, the function calls getModelList() which is the function that is called when the SECOND select box is called. It (getModelList()) works fine when manually changing the second box, but when I try to call it from createTypes, it just won't work. Here's the code for getModelList:

function getModelList(sel)
{
    var manuCode = sel.options[sel.selectedIndex].value;
        var mytext = manuCode.length;
    if(manuCode.length>0){
        var index = ajax.length;
        ajax[index] = new sack();
        ajax[index].requestFile = 'getModels.php?manuCode='+manuCode;   // Specifying which file to get
        ajax[index].onCompletion = function(){ createModelList(index) };    // Specify function that will be executed after file has been found
        ajax[index].runAJAX();      // Execute AJAX function

    } 
}

function createModelList(index)
{
    var obj = document.getElementById('sub_types');
        $numOpts=(document.getElementById('sub_types').length);
        if($numOpts>1){
            document.getElementById('sub_types').options.length = 0;    // Empty select box
            eval(ajax[index].response); // Executing the response from Ajax as Javascript code
            $num_of_entries=(document.getElementById('sub_types').length);
            if($num_of_entries>1){

            }
            else
            {
                hidediv('p_sub_types');
            }

        }
        else
        {
            document.getElementById('sub_types').options.length = 0;    // Empty select bo开发者_C百科x
            eval(ajax[index].response); // Executing the response from Ajax as Javascript code
            $num_of_entries=(document.getElementById('sub_types').length);
            if($num_of_entries>1){
                showdiv('p_sub_types');
            }
            else
            {

            }

        }
}

Again, everything works fine when MANUALLY changing the select box. But when I try to automatically call getModelList() from createTypes() I get an error in Firebug saying: sel.selectedIndex is undefined.

So I'm guessing that it is trying to call that before the select box has been populated... however, I tried adding a pause (of up to 2 seconds!) before calling the function and the same thing happens.

I believe your issue lies in your call to getModelList() at the end of createTypes().

When you're calling getModelList() here you are passing it the string "types" rather than the "types" element (which you've already acquired as "obj3") which it is expecting.

The simplest solution should be to alter your createTypes function to look more like:

function createTypes(theIndex2)
{
    var obj3 = document.getElementById('types');
    obj3.options.length = 0;    // Empty city select box
    eval(newAjax2[theIndex2].response); // Executing the response from Ajax as Javascript code
    getModelList(obj3);

}

By passing getModelList the element it will have direct access to its properties and should allow your script to function properly.