在第二个选择区域返回“sel.selectedIndex undefined”的链接选择框...为什么？答案

【问题标题】：Linked select boxes coming back 'sel.selectedIndex undefined' on second select area... why?在第二个选择区域返回“sel.selectedIndex undefined”的链接选择框...为什么？
【发布时间】：2011-01-19 23:45:07
【问题描述】：

我有链接/链接的选择框。如果选择第一个选择框，然后选择第二个，等等，一切正常。但是。我想要做的是当有人更改第一个选择区域时，第二个是自动填充的，第三个也是根据第二个框中的第一个选项自动填充的。

这是我目前使用的代码：

函数 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; // 指定要获取的文件
        newAjax2[theIndex2].onCompletion = function(){ createTypes(theIndex2) }; // 指定找到文件后执行的函数
        newAjax2[theIndex2].runAJAX(); // 执行 AJAX 函数

    }

}


函数 createTypes(theIndex2)
{
    var obj3 = document.getElementById('types');
        document.getElementById('types').options.length = 0; // 空城市选择框
        eval(newAjax2[theIndex2].response); // 将来自 Ajax 的响应作为 Javascript 代码执行
            getModelList('类型');

}

您会注意到在 createTypes 的末尾，该函数调用 getModelList()，这是在调用 SECOND 选择框时调用的函数。它（getModelList（））在手动更改第二个框时工作正常，但是当我尝试从 createTypes 调用它时，它就不起作用了。下面是 getModelList 的代码：

函数获取模型列表（选择） { var manuCode = sel.options[sel.selectedIndex].value; var mytext = manuCode.length; 如果（manuCode.length>0）{ 变种索引 = ajax.length; ajax[index] = new sack(); ajax[index].requestFile = 'getModels.php?manuCode='+manuCode; // 指定要获取的文件 ajax[index].onCompletion = function(){ createModelList(index) }; // 指定找到文件后执行的函数 ajax[索引].runAJAX(); // 执行 AJAX 函数 } } 函数创建模型列表（索引） { var obj = document.getElementById('sub_types'); $numOpts=(document.getElementById('sub_types').length); 如果（$numOpts>1）{ document.getElementById('sub_types').options.length = 0; // 清空选择框 eval(ajax[index].response); // 将来自 Ajax 的响应作为 Javascript 代码执行 $num_of_entries=(document.getElementById('sub_types').length); 如果（$num_of_entries>1）{ } 别的 { hidediv('p_sub_types'); } } 别的 { document.getElementById('sub_types').options.length = 0; // 清空选择框 eval(ajax[index].response); // 将来自 Ajax 的响应作为 Javascript 代码执行 $num_of_entries=(document.getElementById('sub_types').length); 如果（$num_of_entries>1）{ showdiv('p_sub_types'); } 别的 { } } }

同样，手动更改选择框时一切正常。但是当我尝试从 createTypes() 自动调用 getModelList() 时，我在 Firebug 中收到错误消息：sel.selectedIndex 未定义。

所以我猜它试图在填充选择框之前调用它......但是，我尝试在调用函数之前添加一个暂停（最多 2 秒！），同样的事情发生了。

【问题讨论】：

标签： javascript ajax

【解决方案1】：

我相信您的问题在于您在 createTypes() 末尾调用 getModelList()。

当您在这里调用 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 元素，它将可以直接访问其属性，并且应该允许您的脚本正常运行。

【讨论】：