使用AJAX获取PHP文件以从MySQL数据库检索数据时，下拉表单消失

Question

我使用AJAX使php文件从MySQL数据库获取数据，并根据用户的首选下拉列表将其填充到下拉列表中。 一切正常，第二个下拉列表已正确填充。

我遇到的问题是，从第二个下拉菜单中选择一个选项时，整个第二个下拉列表在选择时就消失了，我无法弄清原因。

工作示例可以在这里找到。

标记

<!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或其他商家的表格。 如果有人知道更好的方法，也请说。

Answer 1

您的第二个下拉菜单具有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。

使用AJAX获取PHP文件以从MySQL数据库检索数据时，下拉表单消失

问题描述

标记

PHP文件-getuser.php

1 个解决方案

解决方案1
0 已采纳 2013-11-22 19:42:10

使用AJAX获取PHP文件以从MySQL数据库检索数据时，下拉表单消失

问题描述

标记

PHP文件-getuser.php

1 个解决方案

解决方案1 0 已采纳 2013-11-22 19:42:10

解决方案1
0 已采纳 2013-11-22 19:42:10