我认为我的异步代码有问题。

我选择的表格:

 <tr> <td>Genre</td> <td> <div class="styled-select"> <select id="Genre" name="Genre" onchange="showUntergenre(this.value)"> <option value="0" selected="selected"></option> $_sql_Genre = mysql_query ("SELECT * FROM tbl_genre "); While ($Genre_result = mysql_fetch_array($_sql_Genre)){ $genre_id=$Genre_result[0]; $genre_name=$Genre_result[1]; echo"<option value='$genre_id'>$genre_name</option>"; } </select> </div> </td> <input type="hidden" name="GenreHidden" id="GenreHidden" value="$genre"> <td> <div id="txtHint"></div> </td> <input type="hidden" name="UntergenreHidden" id="UntergenreHidden" value="$untergenre"> </tr><tr> 

现在,我设置隐藏字段的值并采用这种形式。 以下javascript代码将被执行:

 window.onload = selectSelectBox("Genre"); handleGenre(); handleUntergenre(); 

我在选择框中选择一个条目。

 function selectSelectBox(object){ var selectBox = document.getElementById(object); var value = document.getElementById(object + "Hidden").value; if (selectBox != null && value != "0"){ selectBox.selectedIndex = value; } } 

我想要隐藏字段的值。

 function handleGenre(){ genreValue = document.getElementById("GenreHidden").value; if (genreValue != "0"){ showUntergenre(document.getElementById("GenreHidden").value); } } 

现在我在数据库上执行SELECT,以获取新选择框的值。

 function showUntergenre(str, selected) { if (str==0){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getUntergenre.php?genre="+str+"&selected="+selected,true); xmlhttp.send(); } 

该php页面的代码段:

 echo "<select id='Untergenre' name='Untergenre'>"; echo "<option value='0'></option>"; $i =1; $_sql_Untergenre = mysql_query ("SELECT ".$Genre."_bezeichnung FROM tbl_genre_".$Genre); While ($UnterGenre = mysql_fetch_array($_sql_Untergenre)){ if ($i == $selected) echo "<option value='".$i."' selected='selected'>".$UnterGenre[0]."</option>"; else echo "<option value='".$i."'>".$UnterGenre[0]."</option>"; $i++; } 

现在,香港专业教育学院在我的表单中有了一个新的选择框,我想在隐藏字段中选择所需的条目。

 function handleUntergenre(){ untergenreValue = document.getElementById("UntergenreHidden").value; if (untergenreValue != "0"){ var selectBox = document.getElementById("Untergenre"); console.log("!!!!! this selectBox is always null, except in the debugger !!!!: " + selectBox); selectBox.selectedIndex = untergenreValue; } } 

这仅在浏览器调试器中有效,否则“ selectBox”为空。

我不知道是否有人可以在这里为我提供帮助,但是无论如何还是要感谢:-)

===============>>#1 票数:0 已采纳

首先,您的代码中还有其他几个问题:

  • 您可以在分配给window.onload执行一个函数,而不仅仅是将函数传递给它。 这不是您想要发生的事情。

  • 函数showUntergenre有两个参数,但是您只能用一个参数来调用它(两个参数都来自主JS代码中的HTML属性),因此selected始终是未定义的,但是您要将其值添加到URL。

现在到主要问题:

实际上,您正在尝试找到Untergenre选择框。 您需要等待http请求返回响应,然后再查找选择框。

一种方法是使用回调系统。 我将在这里提供,但是您绝对应该考虑使用promise和fetch API

让函数showUntergenre接受一个回调函数( cb )作为参数,在加载了其他内容后将调用该函数:

function showUntergenre(str, selected, cb) {
    // ...
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            if (cb) cb(); // call the callback (if provided)
        }
        // ...

现在确保使用了回调功能,在handleGenre也是如此。 请注意,我不知道您打算为selected值传递什么,因此请提供您希望它具有的值:

function handleGenre(cb){
    genreValue = document.getElementById("GenreHidden").value;
    if (genreValue != "0"){
        var selected = .......;
        showUntergenre(document.getElementById("GenreHidden").value, selected, cb);
    }
}

...并在handleGenre的调用中:

window.onload = function () { // Pass a function!!
    selectSelectBox("Genre");
    handleGenre(handleUntergenre); // here we define the real callback
};

这就是主意...现在您可能不得不根据实际需要进行调整。

  ask by Matthias Löwe translate from so

未解决问题?本站智能推荐: