Связанные блоки выбора возвращаются 'sel.selectedIndex undefined' во второй области выбора ... почему?

Question

У меня есть связанные / связанные поля выбора. Все работает нормально, если выбрано первое поле выбора, затем второе и т. Д. Однако. То, что я хочу сделать, - это когда кто-то изменяет первую область выбора, вторая заполняется автоматически, а третья также заполняется автоматически на основе первого параметра во втором поле.

Вот код, который я использую до сих пор:

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');

}

В конце createTypes вы заметите, что функция вызывает getModelList (), которая вызывается при вызове окна выбора SECOND. Он (getModelList ()) отлично работает при ручном изменении второго поля, но когда я пытаюсь вызвать его из createTypes, он просто не будет работать. Вот код для 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 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){
                showdiv('p_sub_types');
            }
            else
            {

            }

        }
}

Опять же, все работает нормально, когда ВРУЧНУЮ смену поля выбора. Но когда я пытаюсь автоматически вызвать getModelList () из createTypes (), я получаю ошибку в Firebug, говорящую: sel.selectedIndex не определено.

Итак, я предполагаю, что он пытается вызвать его до того, как будет заполнено поле выбора ... однако я попытался добавить паузу (до 2 секунд!) Перед вызовом функции, и происходит то же самое.

Answer 1

Я полагаю, что ваша проблема заключается в вашем вызове getModelList () в конце createTypes ().

Когда вы вызываете getModelList (), здесь вы передаете ему строку «types», а не элемент «types» (который вы уже получили как «obj3»), который он ожидает.

Самое простое решение должно состоять в том, чтобы изменить функцию createTypes так, чтобы она выглядела следующим образом:

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);

}

Передав getModelList элементу, он получит прямой доступ к своим свойствам и должен позволить вашему скрипту нормально функционировать.