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

這是這個想法......現在你可能不得不根據你的實際需要進行調整。