在启动时使用javascript加载连续的选择框 [英] Loading successive select boxes on startup with javascript
问题描述
我试图在启动时从javascript中填充选择框，每个选择框都取决于上一个.
I am trying to populate select boxes from javascript at start up, with each one depending on the previous one.
在HTML代码中，我有
In HTML code I have
<body onload="start_up()">
<span id="FirstList">xxxxxxx</span>
<span id="SecondList">xxxxxxx</span>
JavaScript代码是
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;
}
在选择框被select_first命名，并且当在PHP生成select_second他们的代码.
The select boxes are named select_first and select_second when their code is generated in php.
这对于第一个来说工作正常，但是第二个load_select失败，因为它不知道select_first.我以为它是按顺序完成的，因此，在到达语句时，应该知道第一个下拉列表. (请注意，上面的代码做了一些简化，以说明问题，load_select的第二个参数确定了确切的SQL调用，stateChanged稍微复杂些，因为它需要知道调用了哪个load_select.但是，它们都可以正常工作本身，它在启动时的多重负载会失败.)
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.)
推荐答案
因此，基本上，您正在进行两个连续的AJAX调用，并尝试将第二个的执行与第一个的结果联系起来?那样行不通，因为AJAX中的第一个字母表示异步，意思是好，伙计们，我将获取该URL，但您可以在没有我的情况下继续进行下去".因此，javascript会触发第一个请求，然后继续执行，而无需等待它返回任何内容.
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.
如果仅在成功执行第一个请求后才运行第二个请求，则需要使用回调和onSuccess()事件.
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.
为使其简短，请将第二个调用置于stateChanged()函数中.
To make it shorter, put the second call in the stateChanged() function.
这篇关于在启动时使用javascript加载连续的选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
