Question

我认为我遇到了异步代码问题。

我的表单中有一个选择：

＆＃13;

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

＆＃13;

现在我设置隐藏字段的值并以此形式进行。将执行以下JavaScript代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想要隐藏字段的值。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

该php页面的片段：

＆＃13;

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

＆＃13;

现在我的表单中有一个新的选择框，我想选择我想要的条目，位于一个隐藏的字段中。

＆＃13;

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

＆＃13;

这仅适用于浏览器调试器，否则＆＃34; selectBox＆＃34;是空的。

我不知道是否有人可以在这里帮助我，但无论如何，谢谢： - ）

Answer 1

首先，您的代码中还有其他几个问题：

分配到window.onload时，执行函数，而不是仅仅将函数传递给它。这不是你想要发生的事情。
函数showUntergenre有两个参数，但是你只用一个参数调用它们（都来自主要JS代码中的HTML属性），所以selected总是未定义的，但是您将其值添加到URL。

现在主要问题是：

确实，您正试图在Untergenre选择框可用之前找到它。您需要等待http请求返回响应，然后才查找选择框。

实现此目的的一种方法是使用回调系统。我会在这里提供，但你绝对应该考虑使用promises和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
};

这是个主意......现在你可能需要根据实际需要进行调整。

Javascript，更改新创建对象的值

1 个答案: