我使用 AJAX 使 php 文件从 MySQL 数据库获取数据，并根据用户的首选下拉列表将其填充到下拉列表中。一切正常，第二个下拉列表已正确填充。
我遇到的问题是，当从第二个下拉菜单中选择一个选项时，整个第二个下拉菜单在选择时就消失了，我无法弄清楚为什么。
可以找到工作示例HERE .
标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
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","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="width" onchange="showUser(this.value)">
<option value="">Select a Width:</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<br>
<div id="txtHint">
<form>
<select name="length" onchange="showUser(this.value)">
<option value="">Step 2</option>
</select>
</form>
</div>
</body>
</html>
PHP 文件 - getuser.php
<?php
$q = intval($_GET['q']);
$con = mysql_connect('cust-mysql-123-17','products','abc123','products');
if (!$con)
{
die('Could not connect: ' . mysql_error($con));
}
mysql_select_db("products",$con);
$sql="SELECT * FROM deepblack WHERE width = '".$q."'";
$result = mysql_query($sql,$con);
echo "<form>
<select name=\"length\" onchange=\"showUser(this.value)\">
<option value=\"\">Select a Length</option>";
while($row = mysql_fetch_array($result))
{
echo "<option value=\"\">". $row['length'] ."</option>";
}
echo"
</select>
</form>";
mysql_close($con);
?>
谁能帮我解释为什么它就消失了？
我需要的最终结果是用户选择宽度，然后用可用长度填充第二个下拉列表。从第二个下拉列表中，用户选择要购买的长度。因此，我计划将整个第二个下拉列表作为一种表单，将选择发送给 PayPal 或其他商家。如果有人知道这样做的更好方法也请说。
最佳答案
您的第二个下拉菜单有 Value=""
<select onchange="showUser(this.value)" name="length">
<option value="">Select a Length</option>
<option value="">5</option>
<option value="">10</option>
</select>
当你选择它时，它会调用 JS 并执行这个条件:
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
....
用 ID=txtHINT 覆盖 DIV
如果你想修复它:确保在这一行
echo "<option value=\"\">". $row['length'] ."</option>";
该值不为空，或更改JS。
关于javascript - 使用 AJAX 获取 PHP 文件以从 MySQL 数据库检索数据时下拉表单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20153046/