2番目の選択領域で 'sel.selectedIndex undefined'に戻ってきたリンクされた選択ボックス...なぜですか？

Question

私はチェイン/リンクされた選択ボックスを持っています。最初の選択ボックスが選択された場合、2番目の選択ボックスが選択された場合はすべて正常に動作します。私がしたいのは、誰かが最初の選択領域を変更し、2番目が自動集計され、3番目が2番目のボックスの最初のオプションに基づいて自動集計される場合です。

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

} 

をあなたは関数がSECONDボックスを選択したときに呼び出される関数ですgetModelList（）を呼び出して、createTypesの終わりに気づくでしょう。ここ

は、私がこれまで使っていたコードですが呼び出されます。 （getModelList（））は、手動で2番目のボックスを変更したときに正常に動作しますが、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"要素（すでに "obj3"として取得済み）ではなく "types"という文字列を渡しています。

最も簡単な解決策は、あなたのcreateTypesがより見えるように機能変更する必要があります：それは、そのプロパティに直接アクセスする必要がありますし、あなたのスクリプトが正常に機能できるようにする必要がありgetModelList要素を渡すことで、

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

} 

。