Loading successive select boxes on startup with javascript

问题

I am trying to populate select boxes from javascript at start up, with each one depending on the previous one.

In HTML code I have

<body onload="start_up()">  
<span id="FirstList">xxxxxxx</span>  
<span id="SecondList">xxxxxxx</span>

Javascript code is

function start_up()
{
 load_select('','Type1')
 load_select(document.getElementById('select_first').value,'Type2')
}

function load_select(argument,code)
{
   xmlhttp=GetXmlHttpObject();
   if (xmlhttp==null)
       {
          alert ("Browser does not support HTTP Request");
          return;
       }
   var url="getdropdown.php";
   url=url+"?q="+code+argument;
   url=url+"&sid="+Math.random();  // this is needed to make sure its not loading a cached version
 last_http_type=code;
   xmlhttp.onreadystatechange=stateChanged;
   xmlhttp.open("GET",url,true);
   xmlhttp.send(null);
}

function stateChanged()
{
   if (xmlhttp.readyState==4)
    {
             if (last_http_type=="Type1")                      
                document.getElementById("FirstList").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type2")
               document.getElementById("SecondList").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type3")
               document.getElementById("OutputTable").innerHTML=xmlhttp.responseText;
             else if (last_http_type=="Type4")
               document.getElementById("OutputTable").innerHTML=xmlhttp.responseText;
             last_http_type="cleared";      
        }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  return new XMLHttpRequest();   // code for IE7+, Firefox, Chrome, Opera, Safari
if (window.ActiveXObject)
  return new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
return null;
}

The select boxes are named select_first and select_second when their code is generated in php.

This works fine for the first one, but the second load_select fails due to it not knowing about select_first. I was assuming that its done sequentially and thus, by the time it reaches the statement, should know about the first drop down. (Note that the code above is simplified a little bit to illustrate the problem, the second argument of load_select determines the exact SQL call, also stateChanged is slightly more complicated since it needs to know which load_select was called. However, they all work fine by themselves, its the multiple load at startup which fails.)

回答1:

So basically you are making two consecutive AJAX calls and try to tie the execution of second one to the result of the first one? This doesn't work that way, because first A letter in AJAX means Asynchronous, meaning "okay, guys, I'll go fetch that url but you can go on without me". So javascript fires first request and then goes further without waiting for it to return something.

If you want to run second request only after successful execution of the first one, then you'll need to use callbacks and onSuccess() event.

To make it shorter, put the second call in the stateChanged() function.

回答2:

You should write your javascript separate from your html. So your page startup event should be

window.onload = function() {
    ....
    }
 or with jquery:
 $(function() { 
  ....
 });

So there you can put your other functions and code. And here would be a excellent to use JQuery. Look for example load method. It would propably solve your problems much faster than writing ajax from scratch.

来源：https://stackoverflow.com/questions/2370083/loading-successive-select-boxes-on-startup-with-javascript

标签

javascript

select

onload