Javascript，更改新创建对象的值

Question

我想我遇到了异步代码的问题。

我有选择的形式：

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

现在我设置隐藏字段的值，转向以这种形式。下面的JavaScript代码会被执行：

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

我选择的选择框的条目。

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

我想隐藏字段的值。

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

现在我做一个SELECT上我的数据库来获取价值的新选择框。

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

片段，PHP页面的：

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

现在，香港专业教育学院得到了我形成一个新的选择框，我想选择我需要的项目，位于一个隐藏的领域。

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

这只有在浏览器调试器，否则 “选择框” 为空。

我不知道是否有人能帮助我在这里，但我还是谢谢你:-)

Answer 1

首先，你必须在你的代码的几个其他问题：

• 分配时，您执行功能到window.onload，而不只是传递给它的功能。这不是你想要发生的事情。

• 功能showUntergenre有两个参数，但你只能与一（无论是从HTML属性作为主JS代码），所以selected永远是不确定的调用它，但你的价值添加到URL。

我们的主要问题：

事实上你正在努力寻找的Untergenre选择框可用之前。您需要等待http请求返回响应，然后才能查找选择框。

做到这一点的一种方法是使用回调系统。我公司将提供在这里，但你一定要考虑使用的承诺和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 
}; 

这是这个想法......现在你可能不得不根据你的实际需要进行调整。