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
            {

            }

        }
}

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

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

Answer 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元素，它将直接访问其属性，并允许您的脚本正常运行。

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

1 个答案: